js：下载后端返回的表格

场景：后端的接口返回了一个文件流给我，需要我进行下载这个excel。

    exportExcel() {
      projectExport({ year: this.year }).then(res => {
        let link = document.createElement("a");  // 使用a标签下载
        let blob = new Blob([res]);  // 转为Blob
        let url = window.URL.createObjectURL(blob);  // 创建下载的url
        link.href = url;
        document.body.appendChild(link);
        link.download = `${this.year}年清单表.xlsx`;  // 自定义文件下载的名称
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);  //  销毁url
      });
    },

其中，

• window.URL.createObjectURL与window.URL.revokeObjectURL是相对的。第一个方法创建了一个指向这个二进制文件流的url。而第二个方法，则当我们不再需要和这个url的时候就将他进行销毁。
• link.download代表我们下载之后的文件名，可以自行定义。

注意：

这样的excel是可以下载的，但是下载的文件是打不开的，显示文件损坏。
原因：

1. 接口未定义返回格式。
2. 下载文件时，文件后缀名错误。

解决1：

export function export(params) {
  return request({
    url: `url`,
    method: 'get',
    params,
    responseType: 'arraybuffer'
  })
}

加上一个额外的参数：responseType: 'arraybuffer'即可。

解决2：

        link.download = `${this.year}年清单表.xlsx`;  // 自定义文件下载的名称

其中，
由于表格后缀名有xls和xlsx格式，这个格式由后端决定，需与后端沟通决定是哪种格式。如果前后端定义的不一样，也是文件打不开。