前端下载文件的几种方式

一、a标签download下载

后端返回一个可下载的url文件，或者前端本地保存的文件，通过路径引入下载。

（1）将资源放入前端本地保存，打包后随一起上传自服务器

// 本地资源下载，引入路径即可,这里的路径指的是打包后文件与代码文件的相对路径
<a href="./import-template.xlsx" download target="_blank">
  下载上传模板 
</a>
1
2
3
4

（2） 请求服务器，返回的url放入a标签的href属性中，

下面是伪代码，实现的步骤 先获取url，将其作为变量，放入a标签的href属性中，不同的框架方法不同。

let requestUrl = 'xxxxxx';
let responseUrl = '';
fetch(requestUrl ).then(res => {
 responseUrl = res.data.url
})

// dom节点渲染如果responseUrl出现跨域，download将失效，无法下载
<a href=`${responseUrl }` download target="_blank">
  下载上传模板 
</a>
1
2
3
4
5
6
7
8
9
10

（3）不依赖框架，原生js实现点击下载的方式

//点击某个按钮触发事件
 const onClickDownFile = (id) => {
let requestUrl = `xxxxxx${id}xxxx`;
fetch(requestUrl).then(res => {
	//为了解决a标签跨域无法下载的问题
	const x = new XMLHttpRequest();
      x.open('GET', res.data.url, true);
      x.responseType = 'blob';
      x.onload = () => {
        const dataurl = window.URL.createObjectURL(x.response);
        const a = document.createElement('a');
        a.href = res.data.url;
        a.download = res.data.url;
        a.click();
        a.remove();
      };
      x.send();
})
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

二、后端接口返回二进制流，前端需要接收处理

import { stringify } from 'qs';

type Method = 'GET' | 'POST';

/**
 * 下载文件
 * @param url 接口路径
 * @param data 请求的参数
 * @param method 请求方式
 * @param type 下载文件的类型
 * @param fileName 自定义文件名称
 */
export const download = (
  url: string,
  data: any,
  method: Method,
  type: string,
  fileName?: string,
) => {
  /** fetch 配置项 */
  const params: RequestInit = {
    method,
    headers: {
      Authorization: '',
      'response-type': 'arraybuffer',
    },
  };

  if (method === 'GET') {
    // 每次请求添加时间戳，避免 GET 请求遭遇 HTTP 缓存
    data._ = new Date().getTime();

    // 请求参数合并到 URL 上
    url += `?${stringify(data)}`;
  } else {
    params.body = JSON.stringify(data);
  }

  return fetch(url, params)
    .then((response) => {
      if (response.status === 200 && response.body) {
        if (!fileName) {
          const cd = response.headers.get('content-disposition');
          const cds = cd?.split('filename=') || [];
          if (cds[1]) {
            fileName = decodeURIComponent(cds[1]);
          }
        }
        return response.blob();
      }

      return Promise.reject();
    })
    .then((_blob) => {
      const blob = new Blob([_blob], {
        type,
      });
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName || 'file';
      link.click();

      return 'done';
    });
};
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

使用方式

download(
    'xxxx',
    {},
    "GET", //或者"POST"
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
    fileName, //文件名称
  )
1
2
3
4
5
6
7

type是文件类型，不同的文件类型type不同

content-type 的类型有很多种，每一种对应不同的返回类型，
content-type对照大全 ： https://tool.oschina.net/commons/

三、后端视情况返回二进制流文件（特殊情况，很少遇到）

我在一个项目中遇到这样一个需求，前端导入文件，后端解析并返回结果，如果成功，返回的data为null，code为0,如果失败，返回一个excel的二进制流文件，在excel文件中显示的是失败的原因，并自动下载文件。

const downloadBlob = (blob: Blob, type: string, fileName?: string) => {
  const newBlob = new Blob([blob], {
    type,
  });
  const link = document.createElement('a');
  link.href = window.URL.createObjectURL(newBlob);
  link.download = fileName || '错误文件';
  link.click();
};

export const FileUpload = (url: string, file: FormData): Promise => {
  /** fetch 配置项 */
  const params: RequestInit = {
    method: 'POST',
    headers: {
      Authorization: '',
    },
    body: file,
  };

  return fetch(url, params).then((response) => {
    if (response.status === 200 && response.body) {
      return new Promise((resolve, reject) => {
        const contentType = response.headers.get('content-type') || '';

        if (contentType.indexOf('application/json') >= 0) {
          // 返回的是 JSON 文件
          response.json().then(resolve);
        } else if (contentType.indexOf('application/vnd.ms-excel') >= 0) {
          // 返回的是 excel 文件
          response.blob().then((_blob) => {
            const cd = response.headers.get('content-disposition');
            const cds = cd?.split('filename=') || [];

            downloadBlob(
              _blob,
              'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
              decodeURIComponent(cds[1]),
            );

            resolve();
          });
        } else {
          reject();
        }
      });
    }

    return Promise.reject();
  });
};
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
48
49
50
51
52

content-type 的类型有很多种，每一种对应不同的返回类型，
content-type对照大全 ： https://tool.oschina.net/commons/