移动端预览pdf及遇到的坑

需求

在移动端预览cdn地址的pdf，上下滑动预览全部，pdf内容较少，不用考虑懒加载等，前端框架是Vue2.6

实现方式

自己写是不可能的，毕竟有现成的轮子

1. iframe
2. vue-pdf
3. pdfh5

iframe

pass掉了，不能上下滑动，而且样式比较难看。

vue-pdf

安装的版本 v4.2.0

内部会有报错，Cannot read properties of undefined (reading 'catch')，很影响心态，修改node_moudles中源文件可以阻止本地报错，但是打包后上到手机上，vconsole调试还会有错误信息，毕竟咱不能给node_moudles文件提交到线上

整页滑动预览，页码变化钩子监听不到，如果是按钮切换的话可以，但是和需求不符 pass

pdfh5

pdfh5文档传送门

 // 安装、组件内引入、使用
 1. npm install pdfh5
 2. import Pdfh5 from "pdfh5";
    import "pdfh5/css/pdfh5.css";
 3. var pdfh5 = new Pdfh5(selector, options); // selector选择器，options配置项参数

初始化pdf代码

initPdf() {
            // pdfh5实例化时传两个参数：selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件
            // pdfh5 = new Pdfh5(selector, options) goto初始到第几页，logo设置每一页pdf上的水印
            this.pdfh5 = new Pdfh5('#pdf', {pdfurl: this.pdfUrl, goto: 1, zoomEnable: false, pageNum: false, backTop: false});
            // 监听pdf准备开始渲染，此时可以拿到pdf总页数
            let that = this;
            this.pdfh5.on('ready', function() {
                that.totalNum = this.totalNum;
                if (+this.totalNum === 1) { that.readEnd = true; }
                console.log('总页数:' + this.totalNum);
            });
            // 监听pdf加载完成事件，加载失败、渲染成功都会触发
            this.pdfh5.on('complete', (status, msg, time) => {
                console.log('状态:' + status + '，信息:' + msg + '，耗时:' + time + '毫秒');
            });
            // 监听滚动事件，判断是否翻阅至最后一页
            this.pdfh5.on('scroll', (top, currentNum) => {
                if (currentNum === this.totalNum) {
                    this.readEnd = true;
                }
            });
        }

遇到的坑

一开始在联调阶段一切正常，后来等测试的时候发现在IOS上某些协议pdf加载不出来,安卓没有问题，安卓nice，对比新旧pdf文件差异，能显示的旧pdf是pdf1.4版本，显示不出来的新pdf是pdf1.7版本。

以为是版本差异导致一天都在瞎搞，头发都掉了好多，给1.7版本的pdf改成1.4的，试了一下可以，以为是版本答案的时候，又出岔子了，新建的1.4版本的pdf在IOS上又又又显示不出来了，心塞塞 眼瞅着上线了。

没办法继续对比新旧1.4版本pdf差异，发现tmd俩个地址网络协议不一样，正常显示的是https协议，不显示的是http协议，晴天霹雳，难不成是协议的问题。苦哈哈，还真是协议的问题。

在调试过程中，没有相关错误提示和警告，没有联想到混合协议的问题。蓝瘦香菇。

如何在HTTPS 网页中引入HTTP资源

1. 将http请求转化为https

如果在https网站中请求的http资源本身就支持https，那直接将地址替换成https;

如果不支持并且是静态资源（css、js、img等），可以考虑将资源放到https服务器上

如果请求的地址是从接口返回的，嘿嘿你懂得 让后端大哥改呀！；

1. 使用相对协议

相对协议: 就是将URL的协议（http、https）去掉，只保留//及后面的内容。这样，在使用https的网站中，浏览器会通过https请求URL，否则就通过http发送请求。

1. iframe
2. 将http请求转成https请求

// <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/>

1. 你可以永远相信后端大哥！