javascript 实现下载的几种方法_javascript下载

我们在项目开发过程中，经常会遇到下载功能；基于我使用过的方法做了一个总结，然后写下这篇文章作为记录！

一、使用 a 标签（get请求）
a标签是最简单的方法，只需要把 文件的地址 或 接口 给 a 标签的 href 属性，可以为 a 标签添加 download 属性来指定下载的文件名；可省略download 属性，如果省略浏览器会自动识别源文件名。

<a href="文件地址" download='文件名'>下载</a>
 
//url 文件地址 或 接口地址
function downLoadFile(url) {
    let a = document.createElement('a')
    a.href = url;
    a.download = '文件名'
    a.click();
} 
1
2
3
4
5
6
7
8
9

优点：
1、在文件是 txt 、png 、jpg 等这些浏览器支持打开的文件，不会下载而是直接打开文件，这时候加上download 属性就可以下载；
缺点：
1、需要知道下载地址；
2、不能下载跨域下的浏览器可浏览的文件；
3、不能进行鉴权；

二、window.open()方法（get请求）

//url 文件地址 或 接口地址
function downLoadFile() {
	let url = '/xxx/xxx'; //接口
    window.location.href = url;
} 
1
2
3
4
5

优点：
1、简单直接；
缺点：
1、无法知道下载的进度；
2、会出现URL长度限制问题和编码问题；
3、不能添加header，不能进行鉴权；
4、在文件是 txt 、png 、jpg 等这些浏览器支持打开的文件，不会下载，而是直接打开文件；

三、通过form表单提交的方式（get请求）
动态生成一个form表单，利用表单提交功能实现下载

//url 文件地址 或 接口地址
//data 请求参数：[{key:name,key1:value}]
function downLoadFile(url,data){
	let form = document.createElement('form');
	for(let i in data){
		let input = document.createElement('input');
		input.name = data[i].key;
		input.value = data[i].key1;
		form.appendChild(input)
	}
	form.style.display = 'none';
	form.method = "GET";//请求方式
	form.action = 'url'； //下载文件地址
	document.body.appendChild(form);
	form.submit();
	document.body.removeChild(form);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

优点：
1、传统方法，兼容性好，不会出现URL长度限制问题；
缺点：
1、无法知道下载的进度；
2、在文件是 txt 、png 、jpg 等这些浏览器支持打开的文件，不会下载而是直接打开文件；

四、通过iframe（get请求，地址拼接参数）
动态生成一个iframe，利用iframe有一个src属性，其本质就是发送http请求。（该方法可一次下载多个文件）

//url 文件地址 或 接口地址
//id 参数id
function downLoadFile(){
	let iframe= document.createElement('iframe');
	iframe.src = `${item.url}?id=${id}`;
	iframe.style.display = 'none'
	document.body.appendChild(iframe);
	setTimeout(()=>{
		iframe.remove();
	},2000)
}
1
2
3
4
5
6
7
8
9
10
11

缺点：
1、兼容问题；
2、在文件是 txt 、png 、jpg 等这些浏览器支持打开的文件，不会下载而是直接打开文件；

五、使用blob格式配合a标签（post请求）
将文件转化成 Blob 二进制对象，然后再配合a标签进行下载。

return new Promise((resolve, reject) => {
    this.$http.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
    this.$http({
      method: 'post',
      url: '/xxx/xxx', // 接口地址
      data: data, // 参数
      responseType: 'blob' // 表明返回服务器返回的数据类型
    }).then(response => {
      	if(response.headers.filename != undefined){
      		resolve(response.data)
	        let blob = new Blob([response.data], {
	          type: 'application/vnd.ms-excel'
	        })
	        let fileName = Date.parse(new Date()) + '.xlsx'
	        if (window.navigator.msSaveOrOpenBlob) {
	          navigator.msSaveBlob(blob, fileName)
	        } else {
	          var link = document.createElement('a')
	          link.href = window.URL.createObjectURL(blob)
	          link.download = fileName
	          let evt = document.createEvent('MouseEvents')
	          evt.initEvent('click',true,true)
	          link.dispatchEvent(evt)
	          //释放内存
	          window.URL.revokeObjectURL(link.href)
	        }
      	}else{
      		this.$message.error("数据为空！")
      	}
      },
      err => {
        reject(err)
      }
    )
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

优点：
1、可以设置header，也就可以添加鉴权；
2、可以直接下载浏览器可浏览的文件；
缺点：
1、IE10以下不可用；