使用 a 标签的 download 属性实现导出下载

业务中有个导出csv文件的功能，本来用react-csv来做，后因版本问题无法实现。后来才知道简单的a标签就有下载功能，这里简单记录一下。

download 属性介绍

download是HTML5的新属性。常规的<a>标签通过 href 实现链接跳转，如果想下载文件而不是跳转预览，可以在<a>标签中添加download属性，就能实现下载操作。

download属性会强制触发下载操作，指示浏览器下载 URL 而不是导航到它，并提示用户将其保存为本地文件，例如：

<a href="result.png" download>download</a>

如果缺少download属性，点击 "download" 会直接变成预览图片，当添加download属性后则会触发图片的下载。

在<a>标签中必须设置href属性。 download属性可以设置一个值来制定下载文件的名称。所允许的值没有限制，浏览器自动检测文件的拓展名并添加到文件(.csv,.pdf等)

download属性规定被下载的超链接目标。如果下载文件的后缀与源文件保持一致，可以设置缺省文件名，比如：

<a href="test.png" download="joker.png">下载</a>

或

<a href="test.png" download="joker">下载</a>

语法

<a download="filename">

其中filename为文件名

实际使用

JSON、CSV 与 TSV 格式是表格数据导出下载的常用格式，在实际开发中会经常遇到。

下载txt

<a download="data.txt" href="data:text/txt;charset=utf-8,内容test">
  下载 TXT
</a>

下载JSON

JSON 格式的下载与 txt 下载类似，将 a 标签的 href 开头设置成 data:text/csv;charset=utf-8, ，拼接上数据的 JSON.stringify 的值即可。

<a download="data.json" href="data:application/json;charset=utf-8,{index:10}">
  下载 JSON
</a>

CSV 与 TSV 格式

CSV、TSV 格式首先需要借助 ricardobeat/TSV 这个库将数据对象转换为 CSV、TSV 格式的字符串，其他步骤与 txt 和 JSON 格式的下载都类似。有一点需要特殊注意，如果内容包含中文字符，需要在 data:text/csv;charset=utf-8, 后面加上 \ufeff，否则会造成中文乱码。

<a
  download="data.json"
  href="data:application/json;charset=utf-8,\ufeff一些内容"
>
  下载 CSV
</a>

如果是后端直接返回csv对象的话，前端就可以直接处理了。这里给出我在业务中封装的方法，根据需要修改

企业微信截图_914ada36-ca73-449b-b842-3bf76472976c.png

/**
 * csv文件导出
 */
export const exportFile = (url: string, params: any) => {
  if (!url) return;

  const args = Object.entries(params || {}).reduce(
    (a: any, [k, v]) => (v ? [...a, `${k}=${v}`] : a),
    [],
  );
  const suffix = args.join('&');
  const href = `${url}?${suffix}`;

  const aEle = document.createElement('a');
  aEle.setAttribute('href', href);
  document.body.appendChild(aEle);
  aEle.click();
  document.body.removeChild(aEle);
};

在组组件中调用即可

<a
  onClick={(e) => {
    const {
      user_id,
      start_time,
      end_time,
    } = searchInfo;
    const query = {
      user_id,
      start_time,
      end_time,
    };
    exportFile('/api/v1/search/user_csv', query);
  }}
>
</a>

参考链接：

浅析 HTML5 中的 download 属性

HTML5 中的 download 属性

a标签的下载功能