Vue3 使用pdf.js 预览pdf

Vue3 使用pdf.js 预览pdf

非专业 如有语术错误请谅解

写在前面：vue-pdf 好像并不支持Vue3 参考https://segmentfault.com/a/1190000039858927

本样例是基于后端返回的是文件流

直接上样例

首先下载pdf.js
注意：将解压后的文件放在static下

1.使用ifame嵌套

 <iframe
      id='pdf'
      ref='pdf'
      height='100%'
      :src='pdfUrl'
      width='100%' /> 

//可附带token请求，如果不需要则删掉
const Token = store.getters['user/token']
//fileUrl为返回的文件流
let url = fileUrl
//iframe中的src
this.pdfUrl = '/static/pdf/web/viewer.html?file=' + encodeURIComponent(url)
//如果不需要带token则到这一步就结束了


//下面是带token的处理
const res = await fetch(url, {
  method: 'GET',
  headers: {
  //如果不需要token则删掉
    'Authorization': Token,
  },
})
const blob = await res.blob()
let arr = []
arr.push(blob)
//转化为可预览的格式
let pdfUrl = URL.createObjectURL(new Blob(arr, { type: 'application/pdf' }))
//iframe中的src
this.pdfUrl = '/static/pdf/web/viewer.html?file=' + encodeURIComponent(pdfUrl)


//后续如果需要等待pdf加载后所触发的事件，  
//如本人遇到的则为加载完成后自动打印，
const iframe = document.querySelector('#pdf')
// 处理兼容行问题
if (iframe.attachEvent) {
  iframe.attachEvent('onload', function() {
    //dosomething
  })
} else {
  iframe.onload = function() {
    //dosomething
  }
}

最后：如果用上了记得点个👍