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

前端之家收集整理的这篇文章主要介绍了vue中如何实现pdf文件预览的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

想如下:

Download PDF

显示效果如下:

如果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"

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

过程如下:

猜你在找的Vue相关文章