当前位置：首页 > news >正文

VUE 文件下载，流形式的文件下载，判断返回的是流还是JSON；获取下载名称

news 来源：原创 2025/5/23 5:51:51

在前端中，有很多下载文件的情况，在大多数情况下，后端是以流的形式把需要的数据返回给前端，这就有接口报错的情况在里面，如果接口报错，有的后端则会返回一个带有错误信息的JSON给我们，比如下面这样：

{code: "-1",data: null,message:"没有数据导出！"
}

所以我们在封装axios的时候，需要在请求拦截中做一些处理：

service.interceptors.response.use((response) => {if (response.config.responseType === 'blob') {const contentType = response.headers['content-type']// 情况1：收到的是文件流（正常下载）if (contentType.includes('excel')) {// 方式 1：从自定义头获取const filenameFromHeader = response.headers['filename'];// 方式 2：从 Content-Disposition 解析const contentDisposition = response.headers['content-disposition'];const filenameFromCD = contentDisposition?.split('filename=')[1]?.replace(/"/g, '');return {blob: response.data, // 二进制数据filename: decodeURIComponent(filenameFromHeader || filenameFromCD // 从header获取文件名)}}// 情况2：收到的是错误信息（需要转换）return new Promise((resolve, reject) => {const reader = new FileReader()reader.onload = () => {try {const json = JSON.parse(reader.result)if (json.status !== 200) { // 根据你的错误码约定调整reject(json.message || '下载失败')}}catch (e) {console.log('e==>', e);reject('响应解析失败')}}reader.readAsText(response.data)})}return response.data
}, err)

当然，在封装我们的下载方法的时候，也要记得给responseType加上blob

export function functionName(parameter) {return axios({url: '/api/XiaZaiDiZhi',method: 'post',data: parameter,responseType: 'blob'})
}

在调用方法的时候，如果接口报错，返回了JSON，我们就可以直接在catch中获取到报错信息，也可以获取到我们所需要的文件名称了

//调用接口
functionName(fromsData).then((data) => {const fileName = data.filename;const url = window.URL.createObjectURL(data.blob);const a = document.createElement("a");a.href = url;a.download = fileName;document.body.appendChild(a);a.click();window.URL.revokeObjectURL(url);}).catch((err) => {this.$message.error(err);});