下载附件
刀刀
0字
0分钟
2026/8/16
本项目招聘会模块有一个 下载附件 的功能，该功能主要是用户点击后下载后台上传的附件，文件格式为 .jpg 、.png 、.zip 、.doc 等。
接口调用
调用接口，传递参数，下载文件，发现浏览器网络能看到下载的图片，但是报错。
原因是下载的附件后端以二进制 Blob 的格式返回，需要设置相应的请求头，普通的接口调用会报错。解决方法有以下两点：
- 通过 window.open 跳转新页面下载。原理是利用浏览器的特性，让浏览器帮我们下载，前端不用做任何处理。
- 通过设置请求头下载
blob格式的文件，也是本项目使用的方法。
window.open 下载
拼接文件路径让其跳转到浏览器中，凭借浏览器特性来下载，代码如下所示：
js
window.open(url)blob 下载
设置请求头调用接口下载文件，指定接收类型
responseType为二进制数组arraybuffer。jsaxios({ method: 'get', url: BASE_URL + '/upload/down', params: { path: this.data.attachment, }, responseType: 'arraybuffer', })成功回调中获取
data，通过new Blob转blob格式的数据，通过window.URL.createObjectURL把链接用一个变量保存，执行以下操作：- 创建一个
a标签 - 把
a标签隐藏 a标签的点击跳转href设为保存的链接- 自定义参数添加指定的属性
download，并赋值作为其下载后的文件名称 - 往页面中添加该
a标签 - 触发
a标签的点击事件 - 触发完事件后删除该
a标签
jsaxios({ method: 'get', url: BASE_URL + '/upload/down', params: { path: this.data.attachment, }, responseType: 'arraybuffer', }).then((res) => { const data = res.data const url = window.URL.createObjectURL( new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', }), ) const link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', '附件.' + type) document.body.appendChild(link) link.click() document.body.removeChild(link) })- 创建一个
完整代码
js
// 点击下载附件
handleDownFn() {
// 获取要下载的附件的文件类型
let type = this.data.attachment.split('.')[this.data.attachment.split('.').length - 1]
axios({
method: "get",
url: BASE_URL + "/upload/down",
params: {
path: this.data.attachment,
},
responseType: "arraybuffer",
}).then((res) => {
const data = res.data;
const url = window.URL.createObjectURL(
new Blob([data], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
})
);
const link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", "附件." + type);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
},贡献者
duyidao 刀刀
v_duyilin
Orange