骨科医院网站模板,营销型网站有哪些特点,网页设计教程免费下载,广州市官网网站建设多少钱这里写自定义目录标题 前端文件下载方法使用a标签使用iframe标签二进制流 前端文件下载方法
使用a标签
/*** 文件下载方法 使用a标签* 存在浏览器下载时#xff0c;太快的话#xff0c;会取消上次的下载请求* param {*} href* param {*} filename*/
export function downlo… 这里写自定义目录标题 前端文件下载方法使用a标签使用iframe标签二进制流 前端文件下载方法
使用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标签循环批量下载文件所遇到的问题记录
