项目场景：
项目场景：前端实现下载功能。
问题描述
前端下载成功后，显示无法打开文件，而在postman上测试可以打开文件，如下图所示：
前端下载的相关代码：
services 文件（此处为 get 请求）：
export async function download(params) {
return request(`${Prefix}/userExam/download`, {
params,
});
}
utils 文件：
/**
* 文件下载
* @param blobUrl blob源文件
* @param filename 下载的文件名
*/
export function downloadFileByBlob(blobUrl: any, filename: string): void {
const eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
eleLink.href = blobUrl;
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
URL.revokeObjectURL(blobUrl);
}
下载方法：
const Download = async () => {
const res: Blob = await download(params); // res 即为后端返回的文件流
if (res) {
const fileBlob = new Blob([res], { // 需要修改类型，此处 type 类型对应 .xlsx
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
});
downloadFileByBlob(URL.createObjectURL(fileBlob), 'xx模板.xlsx');
}
};
上述代码完成后会出现“无法打开文件”的错误，下面是解决方案。
解决方案：
需要在请求时加上 responseType: ‘blob’，代码如下：
export async function download(params) {
return request(`${Prefix}/userExam/download`, {
responseType: 'blob',
params,
});
}
如上，便可解决。
ps: 此处贴上 Blob 下载文件时 type 类型 大全
发布者：admin，转转请注明出处：http://www.yc00.com/web/1740324315a4229265.html
评论列表（0条）