vue插件开发之使用pdf.js实现手机端在线预览可移植文档格式文件的扩展名(可移植文档格式的缩写)文档的方法

目前大多数个人电脑浏览器支持在线预览可移植文档格式文件的扩展名(可移植文档格式的缩写)文件，但大多数手机浏览器还未支持，尝试用手机浏览器打开一个可移植文档格式文件的扩展名(可移植文档格式的缩写)文件会弹出是否下载的提示框。网上查了一些资料，在实现的过程中，还是走了比较多的弯路，最后采用了备受推荐的pdf.js插件来实现。

pdf.js可以从开源代码库上克隆下来，然后本地吞咽生成可用的pdf.js和pdf.worker.js(参考自述文件即可)。

不过更简单的方法是使用cnpm来安装：cnpm高-保存pdf js-dist，然后可以在项目中使用了，我使用插件的方式。具体使用示例：

pdf.vue

templatep id='container '！-p class=' pdf-page '-canvas id=' the-canvas '/canvas/PP class=' foot ' v-if=' PdFDoc ' button class=' left ' click=' onrevpage ' v-if=' page num 1 '上一页/button button class=' right ' click=' onNextPage ' v-if=' pagenumpdoc。' numpages '下一页/button/p！-/p-p/p/templatescript从' PDFJS-dist '导入PDFJS导出默认值{ data(){ return { pdfdoc : null，pageNum: 1，pageRendering: false，pageNumPending: null，scale: 0.9 } }，方法： { show pdf(URL){ let _ this=this PDFJS。获取文档(网址).然后（函数(pdf){ _ this。PdfDoc=pdf _ this。RenderPage(1)})}，RenderPage(num){ this。page rendering=true let _ this=this。PdfDoc。GetPage(num ).然后(函数(页面){ var viewport=page。getviewport(_ this。比例)让canvas=文档。getelementbyid(“-canvas”)画布。高度=视口。高度画布。宽度=视口。宽度/将便携文档格式页面渲染到帆布上下文中var Render context={ canvas context : canvas。getcontext(' 2d ')，viewport : viewport } var Render task=page。渲染(渲染上下文)//等待渲染完成renderTask.promise。然后(function(){ _ this。页面渲染==null) { //新页面呈现挂起这个。renderpage(_ this。页码号)这。page numpending=null } })}、queueRenderPage(num){ if(this。page renderpage ending){ this。page numpending=num } else { this。renderpage(num)} }、onrevpage(){ if(this。页码=1){ return }这个。页码-这个。queueRenderPage(这。页码)}、onNextPage(){ if(this。页码=这个.位置：固定；宽度： 100%;高度： 100%;top : 0；左： 0；文本对齐：中心；padding: 5px }。pdf-page { } .脚{位置：固定；transform: translate(-50%，0)；左侧： 50%;}/styleindex.js:

从""导入PDF ./PDF' var $vmexport默认值{ install (Vue，options) { if(！$ VM){ const Pdfplugin=Vue。扩展(PDF)$ VM=新的Pdfplugin().$ mount()。文件。尸体。appendchild($ VM .$el) } Vue.prototype.$showPDF=函数(url) { $vm.showPDF(url) } }把两个文件放到同一文件夹可移植文档格式文件的扩展名(可移植文档格式的缩写)中形成一个插件，在main.js引入并使用：

从@/components/pdf'Vue.use导入pdf(pdf)这样，在需要显示可移植文档格式文件的扩展名(可移植文档格式的缩写)的地方调用某视频剪辑软件的$showPDF方法即可。

效果显示（手机浏览器验证显示正常):

不过需要注意一点问题是：

pdf.js不能处理跨域文件和本地文件，所以本地调试的时候应该请求服务器的文件，如果请求的是远程服务器，存在跨域，那就需要在config/index.js中配置一下代理：

//.代理表： { '/media ' : { target : ' https://xxxx。cn '，//换成正确的服务器域名changeOrigin: true，路径重写： { '^/media': '/媒体' } }}//.然后在使用的地方填相对路径即可：

//.mounted () {this。$ show pdf('/media/up/2018/3/9/494079 c 7 EC 33 BD 371798 DD 0 a 73 c 0 a 0 b . pdf ')}//.以上就是本文的全部内容，希望对大家的学习和支持有所帮助。