Vue.js下载二进制流文件并转为Excel文件

流程原理：

1、获取后端传递来的二进制数据流
2、传递到封装的函数当中，需要传递二进制数据和文件名（不传有默认文件名）
3、将二进制数据流包裹成一个new Blob对象
4、将Blob对象转化为一个URL资源地址，这个地址时一个本地地址
5、创建一个a标签，设置隐藏，添加下载属性，添加到body当中，启动下载
6、下载完毕之后，删除a标签

以下为下载Excel文件的核心逻辑，传入二进制流data和文件名fileName即可

let blob = new Blob([data], {
  type: 'application/octet-stream'
}); // 转化为blob对象
let filename = fileName || 'filename.xls'; // 判断是否使用默认文件名
if (typeof window.navigator.msSaveBlob !== 'undefined') {
  window.navigator.msSaveBlob(blob, filename);
} else {
  var blobURL = window.URL.createObjectURL(blob); // 将blob对象转为一个URL
  var tempLink = document.createElement('a'); // 创建一个a标签
  tempLink.style.display = 'none';
  tempLink.href = blobURL;
  tempLink.setAttribute('download', filename); // 给a标签添加下载属性
  if (typeof tempLink.download === 'undefined') {
    tempLink.setAttribute('target', '_blank');
  }
  document.body.appendChild(tempLink); // 将a标签添加到body当中
  tempLink.click(); // 启动下载
  document.body.removeChild(tempLink); // 下载完毕删除a标签
  window.URL.revokeObjectURL(blobURL);
}

注意事项：在vue框架当中，数据请求是借助axios的，为此，在发送请求时，需要修改responseType，改为arraybuffer，axios默认情况下responseType为json，若是不修改，很可能下载时候会是乱码，或者为null。