1.使用form表单下载
form表单方式下载的文件名字是后台默认的
export function postDownloadFile(url, params){
console.log(url, params)
let form = document.createElement("form");
form.setAttribute("style", "display:none;");
form.setAttribute("method", "post");
form.setAttribute("action", url);
if(params){
Object.keys(params).forEach(key=>{
if(Array.isArray(params[key])){
// value_list = []
params[key].forEach(value=>{
let input_item = document.createElement("input");
input_item.name = key;
input_item.value = value;
form.appendChild(input_item);
})
}else{
let input_item = document.createElement("input");
input_item.name = key;
input_item.value = params[key];
form.appendChild(input_item);
}
})
}
console.log('----------------------form', form)
document.body.appendChild(form);
//根据需求是否添加
// let windowName = 'Download(' + (new Date().getTime()) + ')';
// let w = window.open('', windowName);
form.target = '_blank';
form.submit();
form.remove();
// w.close();
}
2.a标签下载
接口设置
{
responseType:'blob',
headers:{ 'Content-Type': 'application/json; application/octet-stream'}
}
下载
let blob = new Blob([response.data], {type: "application/vnd.ms-excel"})
let url = URL.createObjectURL(blob)
let link = document.createElement('a')
//不设置导出文件名时,导出的文件名是乱码
link.download = '自定义文件名.文件格式'
link.href = url
link.click()
link.remove()
不设置文件名时下载的文件,如下图
a标签下载文件可通过headers获取文件名
let filename = res.headers["content-disposition"].split('filename=')[1]
需要后端设置并放开
response.setHeader("Access-Control-Expose-Headers", "content-disposition");