vue3管理系统中后台返回pdf格式的文件流，前端如何预览？以及uniapp微信小程序中后台返回的base64位的pdf文件如何预览？

vue3

1. 先看一下后台接口返回的文件流。

2.安装插件，在使用的页面引入并使用

// 1 安装插件
npm i vue3-pdf-app

// 2 在页面中引入并使用
import VuePdfApp from "vue3-pdf-app";
import "vue3-pdf-app/dist/icons/main.css";
// 使用组件

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的函数

//通过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)
			}
		})