js 下载流

前言

js 下载流文件，如果可以下载后端返回流，如果有异常接口返回json，根据错误码友好提示用户，目前只能下载zip，以后持续更新。

使用如下

虽然接口要求传入的参数是FormData，使用的时候满屏幕的append也是不优雅的，直接传入json对象，在封装文件里边解析转换。

const _params = {
    value1: xxx,
    value2: xxxx,
};
download('api/download', _params)
    .then(() => {
          // 正常下载
    })
    .catch(() => [
          // 异常情况，包括接口返回错误码
    ]);

封装如下

url是接口地址
params是传入的参数
1、我们需要将params转换成FormData。
2、请求接口
3、responseType固定为blob
4、使用FileReader将blob转换成json，如果转换失败则返回的是流，转换成功说明接口返回错误码，将错误信息提示即可。

export const download = (url, params) => {
  return new Promise((resolve, reject) => {
    // 参数有问题直接抛出异常
    if (!url || !params) {
      reject();
    }
    const _tmpArr = Object.keys(params) || [];

    const _formData = new FormData();

    _tmpArr.map(value => {
      _formData.append(value, params[value]);
    });

    let xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function(e) {
      if (this.status === 200) {
        // 将blob对象转换成json对象，当不能下载接口返回的不是流的时候可以转换成功
        const reader = new FileReader();

        reader.onload = event => {
          try {
            const _data = JSON.parse(event.target.result);

            if (_data && _data.code) {
              if (_data.code !== '000000') {
                message.error(_data.msg);
                // 接口返回不能下载，返回失败，可以在失败中做某些未知的处理
                reject();
              }
            }
          } catch (error) {
            // 接口返回对象是blob，不能被转换成json，正常下载文件

            const blob = this.response;
            const filename = `${Date.now()}.zip`;

            if (window.navigator.msSaveOrOpenBlob) {
              navigator.msSaveBlob(blob, filename);
            } else {
              const a = document.createElement('a');
              const link = window.URL.createObjectURL(blob);
              a.href = link;
              a.download = filename;
              a.click();
              window.URL.revokeObjectURL(link);
            }
          }
        };
        reader.readAsText(this.response);
      }
      resolve();
    };
    xhr.send(_formData);
  });
};

可能不是很完善，目前只写到这....后续逐渐完善。