当前位置:首页 » 《关注互联网》 » 正文

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

2 人参与  2024年05月16日 13:29  分类 : 《关注互联网》  评论

点击全文阅读


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

点击全文阅读


本文链接:http://zhangshiyu.com/post/109481.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1