前端下载excel文件

前端界面通过【下载】按钮，实现下载excel文件功能，需要解析后端返回的二进制流文件。整体思路就是跟后端确认，接口响应返回的数据是blob流文件，然后再创建a标签，利用a标签的href属性，载入数据流，同时还可以自定义文件名称。

Blob()

Blob() 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组成。

var aBlob = new Blob(array**,options);   //**创建一个Blob对象

• array

  是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。

• options

  是一个可选的BlobPropertyBag字典，它可能会指定如下两个属性：

• type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。

• endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持blob中保存的结束符不变

方法：

• URL.createObjectURL(blob); 如果传入的参数是blob对象的话，则可以生成一个blob链接。并赋值给了a标签的href属性。通过a标签的download属性触发下载方法。
• URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了，将它释放掉。

注意：

一定要加 responseType: 'blob'，否则文件会损坏

excel流文件在请求的时候加上响应类型字段，也就是：responseType: 'blob'或者，responseType: 'arraybuffer' ，否则下载出来的excel文件就会损坏，数据无法正确展示。

代码展示：

const onDownload = () => {
    proxy.$axios.post("/down-load-model", {
      id: props.id
    },{
      responseType:'blob'  // 一定要加
    }).then((res) => {
        let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
        let downloadElement = document.createElement('a'); // 创建a标签
        let href = window.URL.createObjectURL(blob); // 创建下载的链接
        downloadElement.href = href;
        downloadElement.download = '模板.xlsx'; // 下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); // 点击下载
        document.body.removeChild(downloadElement); // 下载完成移除元素
        window.URL.revokeObjectURL(href); // 释放掉blob对象
    })
  }