如何在vue中实现pdf文件预览

今天产品提出了一个优化需求，就是我们之前做的图片展示是通过一个img标签来完成的。因为我们在做一个海外后台管理系统，那里的人上传的文件都是pdf格式的，vue技巧不支持这种格式的文件显示。于是谷歌搜索找到了iframe、embed、vueshowpdf(测试后不太好用)、pdf等。本文讲述pdf插件的使用过程。

注意：iframe标签对所有链接都是可以的。例如，如果没有在服务器端设置标题的内容配置，可以直接显示，如下所示：

想要复制如下代码：

iframe src=' http :http://storage . xuangx.com/public _ assets/xuangx/PDF/Playerapi _ v 1 . 0 . 6 . PDF ' width=' 100% ' height=' 100% '此浏览器不支持PDF。请下载pdf查看it 3360 a href='/test . pdf ' rel=' external no follow '下载pdf/a/iframe显示以下效果：

如果pdf有很多页面，不要考虑分页功能。它可以自动向下滑动和翻页。看起来不错，但继续往下看-

我们将上面的链接改为‘https://ECS 7 . tokopedia . net/instant-loan/file/29a 218 e-bef 9-44 CB-b92 B- 8e 81 BC 4d 5228 _ doc-20171013-wa 0035 . pdf’。你发现了什么？看截图。这也是一个pdf链接。为什么这个不行？

什么情况下必须下载下载框才能看到，影响体验。当我去本地时，它仍然占据着我的磁盘。不，不，将上述连接放入浏览器，输入查看响应标题：

内容处置：附件；文件名='DOC-20171013-WA0035.pdf '

就这样，我们必须弹出下载框。因为这些文件存储在远程服务器上，所以当他们想让后端看看它是否能检测到这个响应头时，他们懒得处理它。针对这种情况，网上有很多解决方案，我也尝试过。中间借了一篇文章，根据自己的需要做了一个简单的处理。

https://www.jb51.net/article/143646.htm

流程如下：

执行新公共管理安装pdf-dist -保存在评论目录下创建两个文件：pdf.vue和index.js！-pdf。vue-template div id=' container ' : class=' { ' back ' : isShow } ' canvas id=' the-canvas '/canvas！-//添加关闭可移植文档格式文件的扩展名(可移植文档格式的缩写)功能-span : class=' { ' close ' : is show } ' @ click=' closePdf ' close/span p 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/div/模板脚本从PDFJS-dist ' export default { data(){ return { is show : false，//通过该属性动态添加类，让可移植文档格式文件的扩展名(可移植文档格式的缩写)显示或隐藏pdfDoc: null，//可以打印发现是一个对象，里面有页数信息等pageNum: 1，pageRendering: false，pageNumPending: null，scale: 0.9 })，方法： { closePdF(){ this。is show=false }，show PdF(URL){ this。is show=true 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。页码=这个.back {底色： rgba(0，0，0，0.788)；位置：固定；宽度： 100%;高度： 100%;top : 0；左： 0；文本对齐：中心；padd : 20pxz-index : 100；飞越：卷轴；}.关闭{位置：绝对值；right : 20pxtop : 20pxz-index : 200；color: # fffcursor:指针；} .脚{位置：绝对值；bottom: 50px左侧： 50%;transform: translate(-50%，0)；}/style '//index。jsimport PDF来自' ./pdf ' var $ vmexportdefault { install(Vue，options) { if(！$ VM){ const Pdfplugin=Vue。扩展(PDF)$ VM=新的Pdfplugin().$ mount()。文件。尸体。appendchild($ VM .$el) } Vue.prototype.$showPDF=函数(URL){ $ VM。显示PdF(网址)} } 3 .在main.js中引入

从""导入pdf ./components/pdf'Vue.use(pdf)这样就可以全局使用了，使用的时候就直接使用，本文是在一个图片展示的地方加上一个点击事件，点击时触发该函数即可；

函数show PDF(){ let URL=' http://存储。玄格。com/public _ assets/xuangx/PDF/PlayerAPI _ v 1。0 .6 .PDF '/let URL=' https://ECS 7。托科佩迪亚。net/instant-loan/file/29a 2218 e-bef 9-44 CB-b92 B- 8e 81 BC 4d 5228 _ DOC-20171013-wa 0035。' PDF '此$showPDF(url)}文中添加了关闭功能，点击关闭即可关闭可移植文档格式文件的扩展名(可移植文档格式的缩写)的展示，同时组件中也有分页功能，如果页数大于一就会显示下一页按钮；

以上既是本人实现的过程，至于跨域问题，我这边还没遇到，现在是本地访问可以的，等到线上再看看行不行，如果不行后边再追加方法实现。希望对大家的学习有所帮助，也希望大家多多支持我们。