vue后台項目中，下載Excel模板&批量導出列表的數據

我們后台返回給我的數據是二進制流，需要前端再次加工才能解析為表格，找了好多方法最后可算解決了，走了不少彎路，今天分享給大家，希望你們碰到了可以少入坑，話不多少進入正題了

首先是下載后天給的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'
    })
}

按照自己的的業務邏輯和相應的請求參考上面的代碼，相信你也可以成功下載和導出了，也可以評論，我有時間會回復的