vue3
1. 先看一下后台接口返回的文件流。
2.安装插件，在使用的页面引入并使用
// 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" />
3. 修改请求返回的数据类型 responseType:'blob'
export function GetColoscopyPdf(id:any) {
return httpRequest({
url: '/Investigate/GetColoscopyPdf123?id='+id,
method: 'get',
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的函数文章来源：https://www.toymoban.com/news/detail-800876.html
//通过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 调用接口获取数据文章来源地址https://www.toymoban.com/news/detail-800876.html
GetColoscopy(state.id).then(res=>{
if(res.code==200){
openPdfFileByUrl(res.data)
}
})
到了这里，关于vue3管理系统中后台返回pdf格式的文件流，前端如何预览？以及uniapp微信小程序中后台返回的base64位的pdf文件如何预览？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
