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

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

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

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

接下来看一下代码

<auto-dialogtitle="PDF预览":visible="visible":appendToBody="true"@close="close"width="850px"id="pdfDialog"class="pdfDialog"><template #content><divclass="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 = truenextTick(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 = trueloading.value = falsepdfSrc.value ="/pdf/web/viewer.html?file=" +encodeURIComponent(url) +"&myTime=" +new Date().getTime()}}r.readAsText(res)}})