vue 后端返回文件流,前端导出下载
- 配置axios响应拦截器
js
request.interceptors.response.use(
(response) => {
const res = response.data
// 关键代码: 返回的是文件流
if (res instanceof Blob) {
return response
}
if (res.code == 200 || res == true) {
return res
} else {
Message.error("连接超时")
return Promise.reject(res)
}
},
(error) => {
return Promise.reject(error)
}
)
- 配置api响应类型
js
export async function fileExport(params) {
return request({
url: "/api/file/export",
method: "post",
data: params,
responseType: 'blob', // 配置响应类型
headers: {
'Content-Type': 'multipart/form-data'
}
});
}
- 封装解码下载的方法
js
downloadFile(res) {
const fileNames = res.headers["content-disposition"];
if (fileNames) {
//解码
const fileName = decodeURIComponent(fileNames.match(/=(.*)$/)[1]);
// 处理返回的文件流
const content = res.data;
const blob = new Blob([content], {
type: "application/octet-stream; charset=utf-8",
});
if ("download" in document.createElement("a")) {
//非IE下载
const a = document.createElement("a"); //创建一个a标签
a.download = fileName; //指定文件名称
a.style.display = "none"; //页面隐藏
a.href = URL.createObjectURL(blob); // href用于下载地址
document.body.appendChild(a); //插到页面上
a.click(); //通过点击触发
URL.revokeObjectURL(a.href); //释放URL 对象
document.body.removeChild(a); //删掉a标签
this.$message.success("下载成功");
} else {
//IE10 + 下载
navigator.msSaveBlob(blob, fileName);
this.$message.success("下载成功");
}
}
},
- 发起下载请求
js
fileExport({}).then((res) => {
// 下载文件
this.downloadFile(res);
}).catch((err) => {});
- 后端返回的内容示例
js
PK-q�cfgfW�d�q�ZCB|��|�*�*h㻆},^�{Va�^K<4�6�N�XQ�dž�9�!P��$��҆�d�c�D�j);��ѝP�g��E�M'O�ʕ����H7L�h���R���G��^�'�{��zސʮB��3�˙��h.�h�W�жF�j娄CQՠ똈���}ιL�U:D�����%އ����,�B���[� �� ;˱� �{N��~��X�p�ykOL��kN�V��ܿBZ~����q�� �ar��{O�PKz��q;�S��M�~s+q�~�>�y�ƹXp`=G��C�q-rh?�ڏ�v��=��_M���5o]���2�`g� ��bb48G_��PKMMr�