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";// 使用组件<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的函数

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

本文链接：https://www.kjpai.cn/news/2024-04-08/155313.html，文章来源：网络cs，作者：言安琪，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！