1.创建一个隐藏的A标签来下载
let link = document.createElement('a');
// var blob = new Blob([ data ]);//如果是流文件,可以通过转成blob来下载
// link.href = URL.createObjectURL(blob);
link.href = data;
link.download = title; //download属性指定浏览器直接以下载文件方式打开该链接
link.click();
2.利用ajax来下载文件,前提是数据必须是blob格式或文件流(需要后端配合),我这里用的是axios来实现ajax,仅供参考
function downloadFile(title, data) {
let link = document.createElement('a');
link.href = window.URL.createObjectURL(data);
link.download = title;
link.click();
window.URL.revokeObjectURL(link.href);
}
axios({
method: 'get',
url: 'url',
responseType: 'blob',
params: { id }
}).then((res) => {
var reader = new FileReader();
reader.readAsText(res.data);
reader.onload = (e) => {
downloadFile(`filename`, res.data);
console.log('文件已经成功保存');
};
});
3.如果下载的文件非常大,又是即时生成,为了用户体验,最好是加上loading,用上面第二个方法是可以的,但请求较多的情况下,第二个方法可能会导致服务器过于繁忙,无法响应下载请求,这种情况下,我想了一个办法,把接口拆成2个:
1).第一个接口请求时打开loading遮罩,接口负责接收参数并生成文件包,生成成功后返回状态码并返回文件地址,关闭loading效果:例如
{
code:0,
message:"success",
data:"/url/xxxxx"
}
2).得到返回的URL后,这时候文件是已经在服务器上物理存在了,直接再调用地址下载即可(可以利用上面的方式1或者方式2)