前端文件下载

前端文件下载

1. 利用form.submit直接向后端提交,后端返回文件流

export default function(url, params, method="post", callback){
	let form = document.createElement('form');
	form.style = "display:none;";
	form.action = url;
	form.method = method;
	for(let index in params){
		let keys = object.keys(params);
		let values = object.values(params);
    	let input = document.createElement('input');
        input.type = 'hidden';
        input.name = keys[index];
        input.value =values[index];
        form.appendChild(input);
        }
     	 document.body.appendChild(form);
     	 setTimeout(()=>{                      // 实现异步提交
			form.submit()
		},0)
		callback && callback()
}

优点 ：兼容性良好，传统方式，不会出现URL长度限制问题；
缺点：
1. 获取不到返回值，无法根据回调函数做交互以及进度提示
2.会在html文档中创建元素

2. 利于iframe直接向后端提交,后端返回文件流

export default function(url, params, callback){
	var iframe = document.createElement("iframe");
	iframe.src = url;
	iframe.style.display = "none";
	document.body.appendChild(iframe);
}

优点： 兼容性较好
缺点：
1. 获取不到返回值，无法根据回调函数做交互以及进度提示
2.会在html文档中创建元素
3.对url长度有限制

3. vue项目中axiso配合a标签实现文件下载

export default function(url, params, method="post", callback){
        axios({                          // 用axios发送post请求
          method:method
          url: url
          data: params,
          responseType: 'blob'           // 表明返回服务器返回的数据类型
        }).then((res) => {               // 处理返回的文件流
            const content = res
            const blob = new Blob([content])
            const fileName = '测试表格123.xls' // 如需要返回的文件名，可在返回值res中的响应头中获取
            if ('download' in document.createElement('a')) { // 非IE下载
              const elink = document.createElement('a')
              elink.download = fileName
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()                               
              URL.revokeObjectURL(elink.href) // 释放URL 对象
              document.body.removeChild(elink)
            } else { // IE10+下载
              navigator.msSaveBlob(blob, fileName)
            }
        })
 }

优点： 下载可控，可以随时停止下载，修改文件名，显示下载进度，提示等待以及回调 等。
缺点： 存在浏览器兼容性的问题（a标签的方式支持IE10+）；