我们在项目开发过程中,经常会遇到下载功能;基于我使用过的方法做了一个总结,然后写下这篇文章作为记录!
一、使用 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以下不可用;