前端文件下载 ajax 下载完毕回调
公司项目,文件导出,导出的时间段内,希望可以弹出加载中,一直到后台返回文件。
代码及兼容性都比较粗糙,主要是提供个思路。
常规做法
1 a 链接的方式 把下载地址给到 a 标签的 href 上
2 window.location.href
目标做法
思路
通过下载文件流,前端生成文件。
实现参考
/**
* ajax 方式下载文件
* @param {*} url 必填
* @param {*} fileName 必填 如 "学生学籍卡.rar"
* @param {*} showLoading 非必填
* @param {*} callBack 非必填
*/
function getFile({url, fileName, showLoading, callBack}) {if (!url) return
if (!window.XMLHttpRequest || !window.Blob) {
// 不兼容处理(ie7 以下)window.location.href = url
return
}
const loadingEle = document.getElementById("mainLoading");
if (showLoading && loadingEle) {// 展示加载中...}
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = function () {if (showLoading && loadingEle) {// 隐藏加载中..}
if (callBack) callBack()
var a = document.createElement("a");
a.download = fileName ; // 文件名 含文件格式
a.href = window.URL.createObjectURL(new Blob([xhr.response]));;
document.body.appendChild(a);
a.click();
a.remove()};
xhr.send();}
优缺点
优点:下载可控,可以随时停止下载,修改文件名,显示下载进度,提示等待以及回调 等等
缺点:性能影响(待定,大文件应该能体现); 格式,后端返回的格式假如不固定该如何处理还没想好;自己封装的问题很多会考虑不周,比如登录超时提示等等;兼容性问题 XMLHttpRequest 以及 Blob 这些方法的支持问题。
如果你有一套完善的轮子 请贴上地址或代码 借鉴借鉴!