pdf的下载,后端返回工作流,前端进行转换

前端将后端返回的工作流进行转换

项目中接触到了pdf的下载和预览的功能,记录一下~

这里pdf的下载和预览的接口,后端返回的数据结构与其他的接口返回的数据结构有点不同,是直接返回的工作流,在控制台接口的响应预览内容大致是这样的

在使用下载预览功能的页面引入axios

c 复制代码
<script>
import axios from 'axios
</script>

这里说明一下问什么要重新引入axios使用,为什么不使用封装好的axios

一般来说,项目中我们会对axios进行封装,在请求拦截器/响应拦截器中进行一些操作,通常响应回来的数据内容会被包裹在data中,因此会在响应拦截器中return时直接拿response.data.data,但后端返回工作流只包裹了一层data,如果直接用封装好的axios,则拿不到响应回来的数据内容,因此使用该功能的页面我们单独引入了axios进行使用

下载的方法

c 复制代码
downloadPdf() {
      axios({
        url: '接口url',
        method: 'GET',
        responseType: 'blob', // important
      }).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data], { type: 'application/pdf' }));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', '下载文件.pdf');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }).catch(error => {
        console.error('Error fetching PDF:', error);
      });
    },

预览的方法

c 复制代码
viewPdf() {
      axios({
        url: '接口url',
        method: 'GET',
        responseType: 'blob', // important
      }).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data], { type: 'application/pdf' }));
        //这里我是新打开一个浏览器窗口去预览文件,因为我尝试插入到body中,但是预览窗口没有关闭按钮,所以做的用新的浏览器窗口进行预览
        window.open(url)
      }).catch(error => {
        console.error('Error fetching PDF:', error);
      });
    }
相关推荐
kura_tsuki5 分钟前
[Web网页] LAMP 架构与环境搭建
前端·架构
yinuo13 分钟前
UniApp+Vue3多分包引入同一 npm 库被重复打包至 vendor 的问题分析与解决
前端
码界奇点25 分钟前
Spring Web MVC构建现代Java Web应用的基石
java·前端·spring·设计规范
yinuo44 分钟前
UniApp + Vue3 使用 marked 报错:SyntaxError /[\p{L}\p{N}]/u 问题分析与解决
前端
大前端helloworld1 小时前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端·javascript·面试
小墨宝2 小时前
web前端学习LangGraph
前端·学习
南囝coding2 小时前
React 19.2 重磅更新!这几个新特性终于来了
前端·react.js·preact
Dajiaonew2 小时前
Vue3 + TypeScript 一篇文章 后端变全栈
前端·javascript·typescript
广州华水科技2 小时前
GNSS与单北斗变形监测一体机在基础设施安全中的应用分析
前端
勤劳打代码3 小时前
妙笔生花 —— Flutter 实现飞入动画
前端·flutter·设计模式