前端文件下载

前端文件下载方法

使用a标签

/*** 文件下载方法 使用a标签* 存在浏览器下载时，太快的话，会取消上次的下载请求* @param {*} href* @param {*} filename*/
export function downloadFile(href, filename) {if (href) {let a = document.createElement('a');// 指定下载的文件名filename && (a.download = filename);a.href = href; //  URL对象const id = 'download' + Math.random();a.id = id;document.body.appendChild(a);a.click(); // 模拟点击URL.revokeObjectURL(a.href); // 释放URL 对象// document.body.removeChild(a);document.getElementById(id).remove();}
}

使用iframe标签

/*** 文件下载方法 使用iframe* 可解决浏览器下载时，太快的话，会取消上次的下载请求* @param {*} url*/
function downloadFileIframe(url) {try {let eleIF = document.createElement('iframe');eleIF.src = url;eleIF.style.display = 'none';document.body.appendChild(eleIF);//防止下载2次setTimeout(function () {document.body.removeChild(eleIF);}, 1000);} catch (e) {console.log(e);}
}

二进制流

将接口完全请求回来的二进制流，在浏览器侧转换成文件下载。这种方案，如果下载的文件特别大的情况会导致浏览器内存特别大，不建议这种方案。

// 将url转成blob地址
fetch(url).then(res => res.blob()).then(blob => {const a = document.createElement('a');// 将链接地址字符内容转变成blob地址a.href = URL.createObjectURL(blob);a.download = filename; // 下载文件的名字document.body.appendChild(a);a.click();// 下载完成后 清除占用的缓存资源window.URL.revokeObjectURL(a.href);document.body.removeChild(a);});

参考文章：
通过动态创建a标签，循环批量下载文件所遇到的问题记录