javascript 实现下载的几种方法

绝地灬酷狼 2023-01-01 03:59 166阅读 0赞

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

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

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

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

优点：  
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、传统方法，兼容性好，不会出现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、在文件是 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、可以设置header，也就可以添加鉴权；  
2、可以直接下载浏览器可浏览的文件；  
缺点：  
1、IE10以下不可用；