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

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

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

1.微信小程序端

方式一：webview

<web-view src="http://cn.createpdfonline.org/pdffiles/test(20211215094117).pdf" ></web-view>

运行结果：
分析：

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

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

2.手机app端（vue）

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

        <iframe class="iframe" src="http://cn.createpdfonline.org/pdffiles/test(20211215094117).pdf"></iframe>

        <embed class="iframe" src="http://cn.createpdfonline.org/pdffiles/test(20211215094117).pdf">

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

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

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

npm install --save vue-pdf

<template><div class="pdf_wrap"><div class="pdf_list"><pdf  :src="src"  style="width: 100%" ref="pdf"> </pdf></div></div>
</template><script>import pdf from 'vue-pdf'export default {name: 'myTestOne',components: {pdf},data () {return {src: 'http://cn.createpdfonline.org/pdffiles/test(20211215094117).pdf',}},methods: {}}
</script>
<style scoped>.pdf_wrap {background: #fff;height: 100vh}.pdf_list {height: 80vh;overflow: scroll;}</style>

当你运行这段代码时（在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的功能
监控当前页面加载进度

代码实现（多页显示）：

<template><div class="pdf_wrap"><div class="pdf_list"><pdf   v-for="i in numPages" :key="i" :page="i" :src="url"  style="width: 100%"  > </pdf></div></div>
</template><script>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总页数})},}}
</script>
<style scoped>.pdf_wrap {background: #fff;height: 100vh}.pdf_list {height: 100vh;overflow: scroll;}</style>

结果展示：

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

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

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

<template><div><div class="tools"><bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="prePage" class="mr10"> 上一页</bk-button><bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="nextPage" class="mr10"> 下一页</bk-button><div class="page">{{pageNum}}/{{pageTotalNum}} </div><bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="clock" class="mr10"> 顺时针</bk-button><bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="counterClock" class="mr10"> 逆时针</bk-button></div><pdf ref="pdf":src="url":page="pageNum":rotate="pageRotate"@progress="loadedRatio = $event"@page-loaded="pageLoaded($event)"@num-pages="pageTotalNum=$event"@error="pdfError($event)"@link-clicked="page = $event"></pdf></div>
</template>
<script>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.pageNumpage = page > 1 ? page - 1 : this.pageTotalNumthis.pageNum = page},// 下一页函数nextPage() {var page = this.pageNumpage = page < this.pageTotalNum ? page + 1 : 1this.pageNum = page},// 页面顺时针翻转90度。clock() {this.pageRotate += 90},// 页面逆时针翻转90度。counterClock() {this.pageRotate -= 90},// 页面加载回调函数，其中e为当前页数pageLoaded(e) {this.curPageNum = e},// 其他的一些回调函数。pdfError(error) {console.error(error)},}}
</script>
<style scoped></style>

结果展示：

总结：在实际测试中发现以下问题

场景：一个pdf列表，点击每个pdf预览；
结果：在ios系统中偶尔会出现白屏的状态，而在android系统中没有这个问题。

经过以上的尝试后，最后决定基于pdf.js来实现业务要求。

引言：经上面的测试，发现了以下问题：

兼容性不好
不适用多语言场景（不能共用一套）
会出现跨域问题
难于监控阅读状态
不能控制下载状态

在基于vue开发的移动项目中，如果预览的pdf数量不是很多的话，是可以使用 vue-pdf 的，因为在实际开发测试中，ios系统依次预览多个pdf文件会出现白屏的现象，android系统不会出现。但是此时也很难监控阅读状态，所以最后采用pdf.js来实现业务需求。

实现效果

1.下载pdfjs

官网：

http://mozilla.github.io/pdf.js/getting_started/#download

2.放在项目中位置

将下载下来的文件解压，放在项目的public目录下

为了减小打包体积，bulid文件夹中保留pdf.js和pdf.worker.js即可正常编译。

3.在页面中使用

在我的项目中，pdf文件是以url的形式提供的,我们在页面中放一个iframe，他的src属性等于到viewer.html的相对路径 '/pdfplugin/web/viewer.html?file=' ，file后拼接你的pdf的url就可以了。

代码实现：

<template><div><iframe :src="src" style="width: 100%;height: 100vh" ></iframe></div></template><script>export default {name: "myTestTwo",data(){return {url:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',src:''}},mounted() {this.getUrl();},methods :{getUrl:function () {this.src = '/pdfplugin/web/viewer.html?file=' + this.url}}}
</script><style scoped></style>

效果展示：

通过结果可以看出，pdf.js真的是很强大,我们可以按照需求来更改源码，实现自己想要的效果。

4.出现问题

跨域问题：可参考这篇文章，推荐让后端小伙伴添加配置。
当访问本地文件时，有可能会出现**Not allowed to load local resource**的问题，原因是谷歌浏览器禁止直接访问磁盘文件，在实际开发中，文件大多存在服务器中，如果个人想学习测试可以使用在线的pdf资源。
在使用viewer.html相对路径时有可能找不到正确路径，我之前的路径是/public/pdfplugin/web/viewer.html?file=，发现怎么也找不到文件，后来去掉了一层/public，pdf就神奇的出来了。

5.更改源码（持续更新中）