好久没写东西,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)
}
})
标签:文件,res,resData,value,js,Vue3,pdf,binaryData
From: https://blog.csdn.net/chenacxz/article/details/139638368