vue3管理系统中后台返回pdf格式的文件流，前端如何预览？以及uniapp微信小程序中后台返回的base64位的pdf文件如何预览？
weixin_49781735 2024-07-21 17:03:02 阅读 82
vue3
1. 先看一下后台接口返回的文件流。
2.安装插件，在使用的页面引入并使用
<code>// 1 安装插件
npm i vue3-pdf-app
// 2 在页面中引入并使用
import VuePdfApp from "vue3-pdf-app";
import "vue3-pdf-app/dist/icons/main.css";
// 使用组件
<vue-pdf-app style="height:100vh;" :pdf="state.pdfImg" />code>
3. 修改请求返回的数据类型 responseType:'blob'
export function GetColoscopyPdf(id:any) {
return httpRequest({
url: '/Investigate/GetColoscopyPdf123?id='+id,
method: 'get',code>
responseType:'blob'
})
}
4. 调用接口处理返回的文件流数据
GetColoscopyPdf(id).then((res)=>{
const blob = new Blob([res], { type: res.type }); // 保存文件流为 Blob
state.pdfImg = URL.createObjectURL(blob); // 转换 Blob 为 URL
})
uniapp
后台返回的是base64格式的pdf文件，首先需要解析base64文件的插件 image-tools
1 安装并引入插件
import { pathToBase64, base64ToPath } from 'image-tools'
2 封装预览pdf的函数
//通过base64打开pdf文件
function openPdfFileByUrl(base64Data) {
let result = base64Data.replace(/[\r\n]/g, "");
let pdfBase64 = `data:application/pdf;base64,${ result}`;
base64ToPath(pdfBase64)
.then((path) => {
uni.openDocument({
filePath: path,
success: function (FileRes) {
console.log("打开成功");
},
fail: (res) => {
console.log("打开失败");
},
});
})
.catch((error) => {
console.error(error);
});
}
3 调用接口获取数据
GetColoscopy(state.id).then(res=>{
if(res.code==200){
openPdfFileByUrl(res.data)
}
})
上一篇： 前端高级架构师课程(总共111门课程，1150GB)
下一篇： AI 音乐生成器 MusicGPT，同声传译StreamSpeech!Web短视频平台Sharine
本文标签
vue3管理系统中后台返回pdf格式的文件流 前端如何预览？以及uniapp微信小程序中后台返回的base64位的pdf文件如何预览？
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。