Vue3 pdf.js将二进制文件流转成pdf预览

摘要： 好久没写东西，19年之前写过一篇Vue2将pdf二进制文件流转换成pdf文件，如果Vue2换成Vue3了，顺带来一篇文章，pdf.js这个东西用来解决内网pdf预览，是个不错的选择...

好久没写东西，19年之前写过一篇Vue2将pdf二进制文件流转换成pdf文件，如果Vue2换成Vue3了，顺带来一篇文章，pdf.js这个东西用来解决内网pdf预览，是个不错的选择。

首先去pdfjs官网，下载需要的文件

然后将下载的东西放到public文件下

接下来看一下代码

<auto-dialog
    title="PDF预览"
    :visible="visible"
    :appendToBody="true"
    @close="close"
    width="850px"
    id="pdfDialog"
    class="pdfDialog"
  >
    <template #content>
      <div
        class="pdfContent"
        id="pdfContent"
        v-loading="loading"
        element-loading-text="PDF加载中..."
      >
        <iframe v-if="showPdf" id="previewPdf" :src="pdfSrc" height="500px" width="100%"> </iframe>
      </div>
    </template>
  </auto-dialog>

//方法
loading.value = true
  nextTick(async () => {
    let res = await Pdf({ filePath: props.src }).catch(() => {})
    if (res) {
      //实例读取文件对象
      const r = new FileReader()
      r.onload = function () {
        try {
          loading.value = false
          // this.result为FileReader获取blob数据,如果返回报错信息,则是正确的json数据,JSON.parse会正常转换
          //如果返回文件流,则JSON.parse时会报错,走catch代码块(进行正常的文件下载)
          const resData = JSON.parse(this.result)
          //resData是后端返回的json数据
          console.log(resData)

          if (resData.code !== 0) {
            ElMessage({
              message: resData.msg,
              type: "error"
            })
            return
          }
        } catch (error) {
          var binaryData = []
          binaryData.push(res)
          console.log(binaryData, "------------------------+++binaryData1111111111111111")
          let url = window.URL.createObjectURL(
            new Blob(binaryData, {
              type: "application/pdf"
            })
          )

          showPdf.value = true
          loading.value = false
          pdfSrc.value =
            "/pdf/web/viewer.html?file=" +
            encodeURIComponent(url) +
            "&myTime=" +
            new Date().getTime()
        }
      }
      r.readAsText(res)
    }
  })