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);
      });
    }
相关推荐
m0_7482550223 分钟前
前端常用算法集合
前端·算法
真的很上进37 分钟前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web1309332039843 分钟前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2341 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1232 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~2 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语3 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport3 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg3 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww3 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest