js几种常用的文件下载方法_js 下载wenjainfangfa

方法一-a标签

使用js动态创建a标签

function download() {
    var a = document.createElement('a');
    var url = '';
    var filename = 'data.xlsx';
    a.href=url;
    a.download = filename;
    a.click()
 }
1
2
3
4
5
6
7
8

或者直接写a标签

<a href='url'></a>
1

方法二-get

后台服务器有静态资源且是固定的文件名（GET方式下载文件）
window.location.href=url

方法三-后台返回文件流（可添加token）

使用FileReader

使用FileReader 读取流文件 会受到chrome浏览器的文件传输的大小限制;
当文件流达到2M时 chrome 直接提示下载失败-网络错误

	var url=''
	var xhr = new XMLHttpRequest();
   		    xhr.open('GET', url, true);  // 也可以使用POST方式，根据接口
   		    xhr.responseType = "blob";
   		    xhr.onload = function () {
   		        if (this.status === 200) {
   		            var blob = this.response;
					let temp = xhr.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1];
					var fileName = decodeURIComponent(temp);
   		            var reader = new FileReader();
   		            reader.readAsDataURL(blob);
   		            reader.onload = function (e) { 
   		                var a = document.createElement('a');
   		                a.download = fileName;
   		                a.href = e.target.result;
   		                $("body").append(a);
   		                a.click();
   		                $(a).remove();
   		            }
   		        }
   		    };
   		    // 发送ajax请求
			xhr.setRequestHeader('Authorization', getCookie("token8989"));
   		    xhr.send()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

URL.createObjectURL 方法

使用URL.createObjectURL 方法导出 不受chrome浏览器文件传输限制

	var url=''
	var xhr = new XMLHttpRequest();
   		    xhr.open('GET', url, true);  // 也可以使用POST方式，根据接口
   		    xhr.responseType = "blob";    // 返回类型blob
   		    xhr.onload = function () {
   		        if (this.status === 200) {
   		            var blob = this.response;
					let temp = xhr.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1];
					var fileName = decodeURIComponent(temp);
					const objectURL = URL.createObjectURL(new Blob([blob], { type: 'text/xls' })) // chrome不受文件你大小限制导出文件
   		           var a = document.createElement('a');
   		                a.download = fileName;
   		                a.href = objectURL;
   		                $("body").append(a);// 修复firefox中无法触发click
   		                a.click();
   		                $(a).remove();
   		        }
   		    };
   		    // 发送ajax请求
			xhr.setRequestHeader('Authorization', getCookie("token8989"));
   		    xhr.send()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21