JS异步下载实现的几种方式

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)