模拟a标签下载文件（同源下载、跨域下载）_a标签下载附件跨域

一、同源下载

同源的情况下a.download修改文件名称是生效的。
跨域使用该方法，下载也生效，只是文件名称修改失效。

function downloadFile(fileUrl,fileName){
    const a = document.createElement('a');//创建a标签
    a.style.display = "none"//设置样式
    a.href = fileUrl;//下载链接
    a.download = fileName;//文件名称
    document.body.appendChild(a)//添加a标签到body
    a.click();//点击a标签
    document.body.removeChild(a)//移除a标签
}
1
2
3
4
5
6
7
8
9

二、跨域下载

在使用a标签下载文件时，download属性可以更改下载的文件名，但是当a标签的下载链接跨域时，download属性将不会生效，原因是浏览器无法获取到文件，不能对他进行更改
注意：html5 新特性a标签download属性只支持谷歌和火狐

在谷歌和火狐浏览器a标签download属性修改文件名失效的原因：不同源，访问的域名和href的域名要一致。
解决办法：
使用HTML5 Blob实现文件下载，先把文件以bobl的形式下载到当前页面，再创建a标签。

import axios from 'axios';

function downloadFile(fileUrl,fileName){
    axios.get(fileUrl, { responseType: "blob" }).then(response => {
       const blob = new Blob([response.data]);
       const a = document.createElement("a");//创建a标签
       a.href = window.URL.createObjectURL(blob);// 创建下载的链接
       a.download = fileName;//下载文件名称
       a.style.display = "none";
       document.body.appendChild(a);//a标签追加元素到body内
       a.click();//模拟点击下载
       document.body.removeChild(a);// 下载完成移除元素
        window.URL.revokeObjectURL(a.href);// 释放掉blob对象
    }).catch(console.error);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15