Vue.js使用Blob的方式实现excel表格的下载(流文件下载)

最近在做blob流导出相关功能，其中需要导出excel、csv、word、zip压缩文件之类的，在导出excel和word中需要知道对应的content-type属性，关于blob格式如下：

后缀	MIME Type
.doc	application/msword
.docx	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.xls	application/vnd.ms-excel
.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.ppt	application/vnd.ms-powerpoint
.pptx	application/vnd.openxmlformats-officedocument.presentationml.presentation

• 具体代码如下：

   this.ExportTransportEnd(sendData).then(res => {
        const blob = new Blob([res],{type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
        const objecturl = window.URL.createObjectURL(blob);
        const creEleA = document.createElement("a");
        creEleA.setAttribute("href",objecturl);
        creEleA.setAttribute("download","结算凭证表");
        creEleA.click();
   })

【注】： 请求接口之前需要加参数 {responseType: 'blob'} ，具体代码如下：

    ExportTransportEnd({ state, dispatch }, sendData) {
        return new Promise((resolve, reject) => {
            request.post(`${API_ROOT}/distribution/tms/carrier/exportTransportEnd`,  sendData, {responseType: 'blob'})
            .then(async res => {
                resolve(res);
            })
            .catch(err => {
                reject(err);
            })
        });
    },  

• get 方式传参代码如下：

    axios
        .get(api.serverUrl + "/order/exportOrder", {
            params: params,
            responseType: "blob" // 1.首先设置responseType对象格式为 blob:
        })
          .then(
            res => {
              //resolve(res)
              let blob = new Blob([res.data], {
                type: "application/vnd.ms-excel"
              }); // 2.获取请求返回的response对象中的blob 设置文件类型，这里以excel为例
              let url = window.URL.createObjectURL(blob); // 3.创建一个临时的url指向blob对象

              // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
              let a = document.createElement("a");
              a.href = url;
              a.download = "导出表格.xlsx";
              a.click();
              // 5.释放这个临时的对象url
              window.URL.revokeObjectURL(url);
            },
            err => {
              resolve(err.response);
            }
          )
          .catch(error => {
            reject(error);
          });

【注】：axios 请求可添加额外配置参数

axios官方文档