js下载文件

参考
项目中需要下载文件，后台兄弟返回的是个blob
下面的代码是在之前的项目中使用的工具方法，这个方法是把返回的base64下载为文件

export function downloadFile (fileName, content) {
  const blob = base64ToBlob(content); // new Blob([content]);
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, fileName);
  } else {
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = fileName;

    //此写法兼容可火狐浏览器
    document.body.appendChild(link);
    const evt = document.createEvent("MouseEvents");
    evt.initEvent("click", false, false);
    link.dispatchEvent(evt);
    document.body.removeChild(link);
  }
}

function base64ToBlob (code) {
  const parts = code.split(';base64,');
  const contentType = parts[0].split(':')[1];
  const raw = window.atob(parts[1]);
  const rawLength = raw.length;
  const uInt8Array = new Uint8Array(rawLength);
  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], { type: contentType });
}

本来想着直接改成下面这样就能用的：

export function downloadFile (fileName, content) {
  const blob = new Blob([content]);
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, fileName);
  } else {
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = fileName;

    //此写法兼容可火狐浏览器
    document.body.appendChild(link);
    const evt = document.createEvent("MouseEvents");
    evt.initEvent("click", false, false);
    link.dispatchEvent(evt);
    document.body.removeChild(link);
  }
}

结果文件下载下来了，但是打不开，这就很气了
找了半天，看到有人说是mock的原因，但是我看了我的项目，已经把mock删掉了，而且返回格式好像也没问题，request并没有被改为MockXMLHttpRequest
最后发现需要在发送请求时，设置responseType: 'blob'

// 问题代码
export function downloadFun(data) {
  return request({
    url: '/system/download',
    method: 'post',
    data: data
  })
}

// 解决方案
export function downloadFun(data) {
  return request({
    url: '/system/download',
    method: 'post',
    data: data,
    responseType: 'blob'
  })
}