我学会了，写一个前端下载文件功能

前言

过去有很多次文件下载的功能，但是都没有记录下来，这次有空就把文件下载的功能从0写一遍，于是就有了这篇文章。
我会从简到难的方式去实现下载功能。从直接下载字符串到简单请求下载文件，最终通过后端返回的文件名来实现动态下载文件。

简单下载

常见的文件下载就是office系列格式文件了，然后再就是txt格式的文件，前端下载通过a标签来实现下载的，其实也是调用浏览器内置功能。

那么把文件格式的mimeType列举一下：
这个篇文章中更全：百度文库

const mimeTypeMapping = {
    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    xls: 'application/vnd.ms-excel',
    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    doc: 'application/msword',
    pdf: 'application/pdf',
    default: 'text/plain' // 默认的文件下载方式
};

浏览器内置的下载功能，虽然知道有新出的api，但是我记得得谷歌浏览器97版本及之后才能使用，于是我用了兼容性最好的方式，a标签 + URL.createObjectURL + blob。

const link = document.createElement('a');
const urlObject = window.URL || window.webkitURL || window;
link.href = urlObject.createObjectURL(
new Blob([data], {
    type: mimeTypeMapping[fileType]
})
);

link.download = fileName;
document.body.appendChild(link);

它其实通过创建对象字符串，赋值为a标签的href属性，然后通过超链接下载协议实现文件的下载。

完整代码如下：

// 下载文件
export function downloadFile(data, fileName = '未知文件', callback) {
  const mimeTypeMapping = {
    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    xls: 'application/vnd.ms-excel',
    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    doc: 'application/msword',
    pdf: 'application/pdf',
    default: 'text/plain' // 默认的文件下载方式
  };

  const fileType = fileName.split('.')[1] || 'default';
  const link = document.createElement('a');
  const urlObject = window.URL || window.webkitURL || window;
  link.href = urlObject.createObjectURL(
    new Blob([data], {
      type: mimeTypeMapping[fileType]
    })
  );

  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  if (typeof callback === 'function') {
    callback('success');
  }
  document.body.removeChild(link);
}

通过请求下载文件

通过请求下载文件，需要将请求头部的responseType设置为 arrayBuffer 或者 blob。
其它的就是简单的基本操作了。这里我用到的是umi-request，axios或者jquery都是类似的逻辑。

import request from 'umi-request';
// 简单下载，超级简单，只能下载前端已知的文件类型的文件，不支持后端动态设置类型。
export async function simpleDownload(url, data = {}, method = 'get', fileName) {
  const options = {
    responseType: 'arrayBuffer' // blob
  };

  let requestMethod;
  if (method.toLocaleLowerCase() === 'get') {
    requestMethod = request.get(url, { params: data, ...options });
  } else {
    requestMethod = request.post(url, { data, ...options });
  }

  return new Promise((resolve, reject) => {
    requestMethod
      .then(res => {
        // 这里拿到res 直接是 data
        const blob = new Blob([res]);
        downloadFile(blob, fileName, resolve);
      })
      .catch(reject);
  });
}

根据后端返回的文件名及类型来动态下载文件

也是通过请求来下载文件，只是会根据后端返回的响应头部的信息content-disposition来下载文件，这时候你能够知道文件类型及文件名称，而不是前端写死的。

import React from 'react';
import { message } from 'antd';
import request from 'umi-request';
// 发请求下载文件，复杂一点，支持后端动态设置文件类型
export async function download(url, data = {}, method = 'get') {
  const options = {
    responseType: 'arrayBuffer' // blob
  };

  let requestMethod;
  if (method.toLocaleLowerCase() === 'get') {
    // umi-request 中设置getResponse，才能在下面获得到response，否者拿到的直接是data
    requestMethod = request.get(url, { prefix, timeout, ...options, getResponse: true }); 
  } else {
    // umi-request 中设置getResponse，才能在下面获得到response，否者拿到的直接是data
    requestMethod = request.post(url, { data, prefix, timeout, ...options, getResponse: true });
  }

  return new Promise((resolve, reject) => {
    requestMethod
      .then(res => {
        // 这里拿到的res，分别是 response 和 data，因为请求时的配置设置了getResponse
        const { response, data } = res;
        // 状态码不对，报错
        if (response.status < 200 || response.status >= 300) {
          const errorData = JSON.parse(String.fromCharCode.apply(null, new Uint8Array(data)));
          message.error(errorData.message);

          return reject('error');
        }

        // 文件名提取不出来，报错
        // const disposition = response.headers?.['content-disposition']; headers是一个Map结构，得使用map的get方法才行
        const disposition = response.headers?.get('content-disposition');
        const matchGroup = /filename=(.*);?/.exec(`${disposition}`);
        let fileName = matchGroup && window.decodeURI(matchGroup[1]);
        if (['', null, undefined].includes(fileName)) {
          if (data.msg) {
            message.error(data.msg);
          }
          return reject('error');
        }
        
        // 去掉字符串两边的 " 符号
        fileName = fileName.replace(/^\"?([\s\S]{0,})\"?$/, "$1")

        downloadFile(response.data, fileName, resolve);
      })
      .catch(() => {
        resolve('error');
      });
  });
}

总结

这些都是比较常见的下载文件的方式，其实也没啥难度，只不过你稍不注意，可能就会踩坑了，比如我从写到测试，就花了近三个小时。
有时你觉得很简单的东西，兴许也会变成很费时费力的东西，所以习惯记录，不然脑子是不会把发生的每一件事每一个细节都给记的死死的，时间久了，就容易忘记，然后就会出现很多小问题。

BUG fix更新 2022-06-16

由于框架不同，umi-request 和 axios中有不一样的地方，比如then中拿到结果会根据参数配置项中getResponse而改变，比如header不是一个普通对象而是一个map。
所以要做点额外处理。