后端返回数据流,下载文件
更新:
以防链接丢失
axios.post(url, param, { responseType: 'blob' }).then((res) => { console.log('res', res); const blob = res.data; const reader = new FileReader(); reader.readAsDataURL(blob); reader.onload = (e) => { const a = document.createElement('a'); a.download = `文件名称.zip`; // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"", a.href = e.target.result; document.body.appendChild(a); a.click(); document.body.removeChild(a); }; }).catch((err) => { console.log(err.message); });
第二种方法:
const postDownloadFile = (action, param) => { const form = document.createElement('form'); form.action = action; form.method = 'post'; form.target = 'blank'; Object.keys(param).forEach((item) => { const input = document.createElement('input'); input.type = 'hidden'; input.name = item; input.value = param[item]; form.appendChild(input); }); document.body.appendChild(form); form.submit(); document.body.removeChild(form); } postDownloadFile(url, param);
第三种,
window.open(`${url}?${qs.stringify(param)}`, '_blank');
或者:
window.location.href = url
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | this .$axios .post(url接口地址, params请求参数, { headers: { token: token }, responseType: "arraybuffer" }) .then((file) => { let content = file.data; // 组装a标签 let elink = document.createElement( "a" ); // 设置下载文件名 elink.download = "附件.zip" ; elink.style.display = "none" ; let blob = new Blob([content], {type: "application/zip" }) elink.href = URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); document.body.removeChild(elink); }) |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通