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)
			}
		})

本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。