vue项目 pdf.js在线预览

vue项目 pdf.js在线预览

1.下载pdf.js

• pdf.js官网地址：https://mozilla.github.io/pdf.js/getting_started/#download

下载所需要的pdf版本

2.将下载的pdf文件夹放入项目静态文件中，vue3.0的话放入到public下，如果是vue2.x版本直接放在根目录的static下

3.页面使用

• 可通过iframe组件绑定src属性直接打开文件

<iframe :src="'/static/js/pdf/web/viewer.html?file=' + filePath" ></iframe>

• 可通过window.open(dir)方式直接打开文件

window.open("/static/js/pdf/web/viewer.html?file=' + filePath")

• 可对后台返回的数据流处理后通过window.open()打开.

fetch(url,{
  method: "get",
  headers: {
   // 如果需要登录权限认证，请求头在这里添加
  }
}).then((res) => res.blob())
.then(data => {
  window.open(`/static/js/pdf/web/viewer.html?file=${encodeURIComponent(window.URL.createObjectURL(data))}`)
}).catch(error => alert(error.message));