vue实现下载后台返回的文件流数据为excel格式文件
如果后端返回的不是Blob类型数据,这里 responseType需要设置返回的响应数据类型。后端返回文件流格式数据,直接打印是乱码,我们前端可以使用以下方法将文件流格式的数据下载为excel文件.完成下载后发现的文件名前后会带上下划线,但是打印文件名又没有问题,例如:_文件名.slsx_设置返回响应数据的类型,需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。(这里是已经封装好了的axi
·
后端返回文件流格式数据,直接打印是乱码,我们前端可以使用以下方法将文件流格式的数据下载为excel文件.
1.axios接口部分:(这里是已经封装好了的axios接口)
如果后端返回的不是Blob类型数据,这里 responseType需要设置返回的响应数据类型
getExcel(data) {
return request({
method: 'post',
url: '/', //根据实际情况填写
data: data,
responseType: 'blob' //设置返回响应数据的类型
})
},
responseType:设置返回响应数据的类型,需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。
blob:表示二进制Blob对象
2.调用接口
async downExcel(data) {
//调用接口
const result = await this.$API.getExcel(data);
if (result.status === 200) {
//如果后端返回的result是进过Blob处理的,直接 window.URL.createObjectURL()
//如果没有,就需要先实例化一个Blob对象,再window.URL.createObjectURL()
const blob = new Blob([result.data], {
type: "application/vnd.ms-excel",
});
//创建标签
const link = document.createElement("a");
link.style.display = "none";
//设置标签href属性为文件路径
link.href = URL.createObjectURL(blob);
//截取文件名
const fileName = decodeURI(
result.headers["content-disposition"].split("=")[1]
);
//设置下载文件名
link.download = fileName
document.body.appendChild(link);
//点击触发下载
link.click();
this.$message.success("导出成功");
//移除标签
document.body.removeChild(link);
// 释放掉blob对象
window.URL.revokeObjectURL(href);
}
},
通过以上方法,即可实现
注意:
完成下载后发现的文件名前后会带上下划线,但是打印文件名又没有问题,例如:_文件名.slsx_
解决:设置下载文件名时添加以下代码即可解决
link.download = fileName.replace(new RegExp('"', "g"), "");
更多推荐
已为社区贡献1条内容
所有评论(0)