实现微信小程序和手机app（基于vue）PDF预览功能

您所在的位置：网站首页 › 微信小程序pdf下载到手机 › 实现微信小程序和手机app（基于vue）PDF预览功能

实现微信小程序和手机app（基于vue）PDF预览功能

2024-07-11 01:50| 来源: 网络整理| 查看: 265

引言：最近在做微信小程序和手机端app开发（基于vue），实现一个pdf预览功能。

需求：点击pdf列表，跳转到预览pdf页面，页面上强制阅读10s后，显示一个按钮返回，更新阅读状态；要求：不能调用本地浏览器预览，不能让用户下载pdf，强制阅读10s后才可返回；准备：pdf在线文档：“http://cn.createpdfonline.org/pdffiles/test(20211215094117).pdf” 1.微信小程序端方式一：webview

运行结果：在这里插入图片描述分析：

上述结果是在ios系统上运行的，pdf可以正常显示；在android系统上，解析失败，一直显示空白界面；原因：ios可以自动解析pdf，安卓系统则解析不了；补充：在webview标签上显示按钮，相信做过微信小程序开发的都了解webview标签会默认占满全屏，覆盖掉其他组件，这个时候如果我们想加一个按钮就可以用cover-view标签来实现，具体实现大家可以自己去探索。

总结：使用webview标签在系统上兼容性并不好，不能控制下载状态，而且在阅读状态上只能做到“假控制”。

2.手机app端（vue）

1. 使用 iframe、embed、新窗口打开

优点：简单，支持大部分 PC 浏览器（IE 不支持）。跨域资源同样可以（无需 cors）缺点：不支持移动端浏览器，不支持 IE 等低版本浏览器。样式无法自定义。

2. 使用vue中的组件vue-pdf

安装：打开命令行，直接使用npm或者yarn安装

npm install --save vue-pdf import pdf from 'vue-pdf' export default { name: 'myTestOne', components: { pdf }, data () { return { src: 'http://cn.createpdfonline.org/pdffiles/test(20211215094117).pdf', } }, methods: { } } .pdf_wrap { background: #fff; height: 100vh } .pdf_list { height: 80vh; overflow: scroll; }

当你运行这段代码时（在pdf链接没过期的情况下），你会惊奇地发现，会出现跨域问题，并报出以下错误：跨域报错解决方案一你需要联系你的后端小伙伴，因为PDF 文件作为静态资源放在 nginx服务器中。在 nginx.conf 中设置：

add_header Access-Control-Allow-Credentials true; add_header Access-Control-Allow-Origin $http_origin;

完整配置如下：

server { listen 80; server_name localhost; add_header Access-Control-Allow-Credentials true; add_header Access-Control-Allow-Origin $http_origin; location / { root pdf; index index.html index.htm; } }

解决方案二（存在问题，后期研究）和vue 接口请求解决跨域问题一样，在本地开发时同样通过 webpack的devServer去代理pdf预览的url（请求），其他环境（生成及测试）则让后端去解决。

解决开发环境pdf预览跨域问题就是在devServer中添加一个代理即可：

//vue.config.js proxy: { //当pdf和数据接口不在同一个请求地址下时,为pdf预览追加一个代理 "/pdf": { target:"http://cn.createpdfonline.org/pdffiles", changeOrigin: true, pathRewrite: { '^/pdf': '' } } }

运行结果如下：在这里插入图片描述重新保存项目，这个pdf就会显示在你的眼前，但是别高兴得太早，这个pdf只有一页，所以在这个基础上进行以下优化：

显示多页pdf显示pdf总页数实现一页一页翻pdf的功能监控当前页面加载进度

代码实现（多页显示）：

import pdf from 'vue-pdf' export default { name: 'myTestOne', components: { pdf }, data () { return { src: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf', numPages:1, url:'' } }, mounted: function() { this.getNumPages() }, methods: { getNumPages() { this.url = pdf.createLoadingTask(this.src) this.url.promise.then(pdf => { this.numPages = pdf.numPages // 这里拿到当前pdf总页数 }) }, } } .pdf_wrap { background: #fff; height: 100vh } .pdf_list { height: 100vh; overflow: scroll; }

结果展示：在这里插入图片描述

该代码在pdfjsWrapper.js文件的第196行会报错，（偷摸给注释掉了）

//pdfRender.cancel().catch(function(err) { //emitEvent('error', err); //});

代码实现（单页展示，可翻页）：

上一页下一页 {{pageNum}}/{{pageTotalNum}} 顺时针逆时针 import pdf from 'vue-pdf' export default { name: 'Home', components: { pdf }, data() { return { url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf", pageNum: 1, pageTotalNum: 1, pageRotate: 0, // 加载进度 loadedRatio: 0, curPageNum: 0, } }, mounted: function() {}, methods: { // 上一页函数， prePage() { var page = this.pageNum page = page > 1 ? page - 1 : this.pageTotalNum this.pageNum = page }, // 下一页函数 nextPage() { var page = this.pageNum page = page

【本文地址】

实现微信小程序和手机app（基于vue）PDF预览功能

实现微信小程序和手机app（基于vue）PDF预览功能

今日新闻

推荐新闻