vue中如何实现pdf文件预览的方法

今天产品提出一个优化的需求，就是之前我们做的图片展示就是一个img标签搞定，由于我们做的是海外后台管理系统，那边的人上传的文件时pdf格式，vue本事是不支持这种格式文件展示的，于是就google搜索，发现有iframe、embed、vueshowpdf(测试了不咋好用)、pdf等，本文说一下pdf插件的使用过程。

创新互联是一家集网站建设,曲阳企业网站建设,曲阳品牌网站建设,网站定制,曲阳网站建设报价,网络营销,网络优化,曲阳网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

说明：iframe标签这种，对于有的链接是可以的，比如这种链接在服务器端没有设置享有头content-disposition,就可以直接显示，如下：

想复制代码如下：

显示效果如下：

如果pdf有很多页，也不用考虑分页功能，自动可以向下滑动就翻页，看着挺好，但是，且往下继续看----->

我们把上边的链接换成' https://ecs7.tokopedia.net/instant-loan/file/29a2218e-bef9-44cb-b92b-8e81bc4d5228_DOC-20171013-WA0035.pdf ',发现什么了？快看截图。。。同样是pdf链接，怎么这个就不行？

什么情况，下载框，必须下载才能看到，那多影响体验，下到本地还占我磁盘，不行不行，把上边那个连接放到浏览器，回车看一下响应头部：

content-disposition :attachment; filename="DOC-20171013-WA0035.pdf"

就是它，让我们必须弹出下载框，由于这些文件是在远程服务器上存贮着，想着让后端看能不能检测到这个响应头，他们也懒得处理，后来只能自己处理了，鉴于这种情况，网上也是有很多解决办法的，本人试验过可以的。中间也是借用了一篇文章 ，根据自己需求，做了简单的处理。

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

过程如下：

• 执行npm install pdf-dist --save
• 在comments目录下创建两个文件：pdf.vue 和 index.js

< !--pdf.vue-->