vue3-web端文件下载

1、使用a标签下载

	<a
      ref="downloadRef"
      :href="downloadInfo.url"
      :download="downloadInfo.name"
      v-show="false"
    >a>
1
2
3
4
5
6

import { ref, unref, reactive, onMounted, nextTick } from "vue"

//下载文件
const download2 = function (url: string, name: string) {
  downloadInfo.url = url;
  downloadInfo.name = name;
  
  nextTick(() => {
    unref(downloadRef).click()
  })
}
1
2
3
4
5
6
7
8
9
10
11

2、使用js代码实现文件下载

//下载文件
const download2 = function (url: string, name: string) {
  const link = document.createElement("a")
  // link.target = '_blank';
  link.href = url
  link.download = name
  document.body.appendChild(link);
  link.click()
  document.body.removeChild(link);
}
1
2
3
4
5
6
7
8
9
10

注：下载文件名不是自己提供给download 属性的名称，查阅发现当a标签的下载链接跨域时，download属性将不会生效，原因是浏览器无法获取到文件，不能对他进行更改。
html5 新特性a标签download属性只支持谷歌和火狐
在谷歌和火狐浏览器a标签download属性修改文件名失效的原因：不同源，访问的域名和href的域名要一致。

解决方法：
使用HTML5 Blob实现文件下载，先把文件以bobl的形式下载到当前页面，再创建a标签。

// 下载文件
const download = function (aUrl: string, name: string) {
  const x = new XMLHttpRequest();
    x.open('GET', aUrl, true);
    x.responseType = 'blob';
    x.onload = function (e) {
      const url = window.URL.createObjectURL(x.response);
      const elink = document.createElement('a');
      elink.href = url;
      elink.target = '_self'; 
      // elink.setAttribute('download', name);
      elink.download = `${name}`;
      elink.style.display = 'none';
      document.body.appendChild(elink);
      setTimeout(() => {
        elink.click();
        document.body.removeChild(elink);
      }, 66);
    };
    x.send();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

参考链接：https://blog.csdn.net/weixin_46600931/article/details/126854016