vue中使用pdf.js展示pdf文件

在vue中使用pdf.js

  • 如何使用
    • 显示方式
    • 出现的问题

如何使用

  1. 首先去官网下载压缩包,解压后放在vue项目的public文件夹下,不然找不到
  2. 然后就可以在组件中使用了

显示方式

  1. 打开新页面显示pdf文件,直接在a标签上引入public下的viewer.html文件,file表示你的pdf的地址

template中的代码

// 直接通过/路径引入,vue中/路径就是public下的文件,此处的href用了vue的属性绑定,使用url变量
<a target="_blank" :href="'/pdfjs/web/viewer.html?file='+url">跳转到新页面的显示pdfa>

script中的代码

  • pdf的url一定要是用encodeURIComponent方法转码,否则可能读取不到数据
  • pdf.js模块的显示界面就会报错 Error: 无效或损坏的PDF文件
url = encodeURIComponent(http;//xxx.xxx.xxx/xxx.pdf)
  1. 如果想嵌入当前页面中展示,可以使用iframe标签,
<iframe :src="'/pdfjs/web/viewer.html?file='+url" width="100%" height="100%">iframe>

出现的问题

我在使用时出现的两个问题

  1. 需要用encodeURIComponent处理url
  2. 因为我装了idm或者xdown,读取pdf文件的时候链接会被这些插件拦截,导致pdf.js读取不到文件,卸载即可解决

你可能感兴趣的:(Vue)