vue后台项目中，下载Excel模板&批量导出列表的数据

Z时代
2024-01-10
分类：综合

vue

我们后台返回给我的数据是二进制流，需要前端再次加工才能解析为表格，找了好多方法最后可算解决了，走了不少弯路，今天分享给大家，希望你们碰到了可以少入坑，话不多少进入正题了

首先是下载后天给的Excel模板：

1，绑定点击事件，调接口发送请求，需要给请求的相应类型设置为blob，具体是这样设置的 responseTyoe:“blob”,一步一步往下看

绑定点击事件：

调接口发送请求：（代码我复制在下面了）

 var blob = new Blob([res.data]后面的代码是固定的写法，复制就好了

download1() {
      this.postData("phonebook/number/template").then(
        (res) => {
          console.log("下载导入模板", res);
          var blob = new Blob([res.data], {
            type:
              "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
          });
          if (window.navigator.msSaveOrpenBlob) {
            navigator.msSaveBlob(blob);
          } else {
            var downloadElement = document.createElement("a");
            var href = window.URL.createObjectURL(blob);
            downloadElement.href = href;
            downloadElement.download = "phoneBookImportTemplate.xlsx";
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement);
            window.URL.revokeObjectURL(href);
          }
        }
      );
    },

给请求的相应类型设置为blob：（请求的接口不同这里在api下的axios文件封装的全局post请求下给了判断，代码也复制在下面）

export const httpPost = (url,data,params,headers,type)=>{
    // 添加接口请求的相应类型
    let responseType;
    switch(url){
        case "phonebook/number/export":
            responseType = \'blob\';
            break
            case "phonebook/number/template":
            responseType = \'blob\'
            break
            case "phonebook/blacklist/template":
            responseType = \'blob\'
            break
            case "phonebook/blacklist/export":
            responseType = \'blob\'
            break
            default:
                responseType=\'json\'
    }
    return instance({
        url:url,
        method:\'post\',
        // data:Qs.stringify({...data}),
        data:type?Qs.stringify({...data}):{...data},
        params:{...params},
        headers,
        responseType,
        // responseType:url==="phonebook/number/template"?\'blob\':\'json\'
    })
}