站长资源
中国站长网站

Vue项目中pdf预览解决方案

其实这个解决方案与vue并无关联。只是我在vue项目中遇到了此类的问题,记录一下。

开始用的是vue-pdf这个组件,但是效果不是很理想。多方尝试之后选择了pdf.js这个开源插件。

1、下载插件:http://mozilla.github.io/pdf.js/getting_started/#download

Vue项目中pdf预览解决方案 -1

2、下载解压后得到如图文件

Vue项目中pdf预览解决方案 -2

3、在vue项目(默认你使用了vue-cli)的public目录下新建pdf文件夹,将解压的文件放入其中,如图

Vue项目中pdf预览解决方案 -3

4、在需要预览的页面增加一个a标签设置属性target=”_blank”

<a :href="/pdf/web/viewer.html?file=你的pdf文件路径" target="_blank">预览</a>

效果如图:

Vue项目中pdf预览解决方案 -4

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » Vue项目中pdf预览解决方案

评论 抢沙发

评论前必须登录!