有两种方法,1:a标签 。2:iframe。不同的是:a标签只能下载单个文件,iframe可以多文件下载。
前提是接口成功返回的是文件流格式。
1.如果你的接口时get请求并且请求头不需要带任何东西,可以直接 href=''写进去直接下载
const elink = document.createElement('a');
elink.style.display = 'none';
elink.href = 'http://xxxxxxxxx'
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
2.如果接口时post,或者需要携带请求头,那可以用Blob。目前我的局限性就是写Blob,必须前端把文件名写入。必须要有elink.download = fileName这行代码,不然我的直接在浏览器跳转页面了(这个问题暂时还没有解决)
axios.get('http://xxxxx')
.then(res => {
// res.data 是接口返回的文件流
const blob = new Blob([res.data])
const fileName = 'xxx'
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
})
3.iframe 多文件下载,for循环就ok
const iframe = document.createElement("iframe");
iframe.style.display = "none"; // 防止影响页面
iframe.style.height = 0; // 防止影响页面
iframe.src = value;
document.body.appendChild(iframe); // 这一行必须,iframe挂在到dom树上才会发请求
网友评论