移动端预览pdf及遇到的坑

·  阅读 1659

需求

在移动端预览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. 你可以永远相信后端大哥!
分类:
前端
收藏成功!
已添加到「」, 点击更改