今天做了一个下载文件的功能,浅录一下啦。
功能背景:
表单提交,点击submit。根据接口返回参数判断,如果当前返回成功,则不考虑。返回失败,则展示错误弹框,点击download file按钮,将返参errorFiledId作为入参,调用下载文件接口且将文件下载到本地。
下载文件命名 = fileName + 当前年月日
// 获取当前的年月日
const GMTToStr = () => {
const date = new Date();
const Str = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
return Str;
};
// 下载文件并保存到本地
const callback = data => {
// 创建a标签,使用 html5 download 属性下载,
const link = document.createElement('a');
// 创建url对象
const objectUrl = window.URL.createObjectURL(new Blob([data]));
link.style.display = 'none';
link.href = objectUrl;
// 自定义文件名称, fileName
link.download = 'File Error' + GMTToStr();
document.body.appendChild(link);
link.click();
// 适当释放url
window.URL.revokeObjectURL(objectUrl);
};
// 返回file信息则进行download file操作
const handleDownloadFile = () => {
const xhr = new XMLHttpRequest();
xhr.open('GET', `/download/${errFiledId}`, true);
xhr.responseType = 'blob';
xhr.onload = () => {
// 返回文件流,进行下载处理
callback(xhr.response);
};
xhr.send();
};
最后结果如下图所示: