vue使用pdf.js实现在线预览pdf文件

本文介绍了如何在Vue项目中利用pdf.js实现PDF文件的在线预览。首先,需要从PDFJS官网下载Stable版本的插件包并放入项目。接着,通过iframe标签引用pdf.js,并设置PDF文件的预览地址和初始显示页码。在预览过程中,可能会遇到跨域问题,这可以通过注释掉viewer.js中特定的判断代码来解决。
摘要由CSDN通过智能技术生成

1.到PDFJS官网 http://mozilla.github.io/pdf.js/getting_started/#download 下载pdfjs插件包,注意下载Stable稳定版的包。将下载的压缩包解压并放入项目中。

在放入项目中时,建议放在public文件夹中,如图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200717181227179.png)

这样在使用的是就是使用本地资源了,而且路径比较容易找到。

2.使用方法

在 iframe 标签中使用。假设 pdfjs 包放在如图目录 …/plugin 下。则写法如下:

<iframe id="previewpdf" src=""./plugin/web/viewer.html?file="+url+"#page=1" width="100%" frameborder="0"></iframe>

其中,src中的url是pdf文件的预览地址、page是设置pdf打开时从第一页开始显示。

3.出现问题

如果出现如图问题:
在这里插入图片描述
这是由于pdf.js不支持跨域请求,才报

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值