后端返回二进制流或文件给前端，前端用Blob模拟实现下载文件
- 前端页面模拟创建一个a
- 利用Blob对象创建指定文件
- 触发a的点击事件实现点击下载效果。
// 导出文件
const exportFile = debounce(() => {
showLoading(true);
DownloadApi({
...searchParams,
})
.then((r) => {
const {fileName=''} = r.respData || {}
// 模拟a标签下载
const blob = new Blob([r.respData], {
type: 'application/vnd.ms-excel' // 下载的是excel格式的文件
});
const objectUrl = URL.createObjectURL(blob)
const a: any = document.createElement('a'); // URL对象
document.body.appendChild(a);
a.setAttribute('download', fileName) // 指定下载的文件名
a.setAttribute('href', objectUrl)
a.click();
URL.revokeObjectURL(a.href); // 释放URL 对象
showLoading(false);
message.success('导出成功');
})
.catch(() => showLoading(false));
}, 500);
如果要下载apk格式的文件
- 对应type:application/vnd.android.package-archive
const packageUrl = cardInfo?.packageUrl || '';
const blob = new Blob([packageUrl], {
type: 'application/vnd.android.package-archive',
});
const objectUrl = URL.createObjectURL(blob);
如果要前端生成TXT 文件并下载
const data = '要下载的文件内容'
const objectUrl = `data:text/plain;charset=utf-8,${encodeURIComponent(data)}`;
a.setAttribute('href', objectUrl);
