JS中利用a标签实现下载文件功能_js a标签下载功能

JS中利用a标签实现下载文件功能

/**
 * 下载文件函数   模拟<a download></a>属性进行下载
 * @param {String} path - 必传   - 下载地址/下载请求地址。
 * @param {String} name - 非必传 
 */
export function downloadFile(path, name) {
  const xhr = new XMLHttpRequest();
  xhr.open("get", path);
  xhr.responseType = "blob";
  xhr.send();
  xhr.onload = function($event) {
    if ($event.target.status === 200) {
      const url = URL.createObjectURL($event.target.response);
      const a = document.createElement("a");
      a.style.display = "none";
      a.href = url;
      a.download = name;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }
  };
}

方式二：
export function downloadFile(path, name) {
    const xhr = new XMLHttpRequest();
    xhr.open("get", path);
    xhr.send();
    xhr.onload = function($event) {
        if($event.target.status === 200) {
            const blob = new Blob([this.response], {type: xhr.getResponseHeader('Content-Type')});
            const url = URL.createObjectURL(blob);
            // 通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
            const a = document.creatElement("a");
            a.style.display = "none";
            a.href = url;
            a.download = name;
            document.body.appendChildren(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            // 下载完成之后需要释放掉url。
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47