快捷導(dǎo)航

vue使用axios導(dǎo)出后臺返回的文件流為excel表格詳解

更新時間：2022年08月11日 14:22:21 作者：求大牛的小李

這篇文章主要介紹了vue使用axios導(dǎo)出后臺返回的文件流為excel表格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用axios導(dǎo)出后臺返回的文件流為excel

之前有一個需求是要使用post請求，導(dǎo)出后臺返回的文件流并在表格中使用，大概思路為使用axios請求回數(shù)據(jù)，定義數(shù)據(jù)為blob格式，再創(chuàng)建一個a標簽自調(diào)就可以完成了

<button @click="download">導(dǎo)出</button>

data() {
? ? return {
? ? ? isClick: true,
? ? };
? },

download() {
      // 簡單的一個小節(jié)流
      if (!this.isClick) {
        return;
      }
      this.isClick = false;
      axios({
        method: "POST",
        url: "",
        data: {},
        responseType: "blob", //定義為blob
      }).then((res) => {
        const file = new Blob([res.data], { type: "application/vnd.ms-excel" });
        const url = URL.createObjectURL(file);
        const a = document.createElement("a");
        a.href = url;
        a.click();
        this.isClick = true;
      });
    },

vue axios導(dǎo)出excel亂碼解決

最近，公司讓我寫一個導(dǎo)出excel的功能，由于已經(jīng)有了前人寫好的代碼，我就直接拿著他的代碼改了一下，結(jié)果在前端下載好之后直接出現(xiàn)了亂碼問題。

開始我懷疑自己哪里寫錯了，經(jīng)過仔細的檢查，并沒有問題。而且在后臺生成的excel并沒有任何問題。

后來我以為是讀入字節(jié)流出現(xiàn)了問題，經(jīng)過調(diào)試對比也是正常的。唯一的問題就是通過后臺返回的res出現(xiàn)了亂碼。

上網(wǎng)搜索，都說這樣寫就行了。

和我寫的一樣。在經(jīng)過了一天的檢查還是無果后，我問了問前輩，原來問題出在這里。

  .post("/TasksTable/ExportData",{
          item: {          
            //傳入項目id，根據(jù)項目id來 搜素任務(wù)
            project_id: this.tasksinfo,
          },
          //頁的索引和頁的長度。
          PageSize: this.pageSize,
          PageIndex: this.currentPage,
          //定義類型
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },     
          responseType:'blob',         
        })

如圖所示，我用一個花括號把我傳入的數(shù)據(jù)和 headers、responseType放在了一起，所以headers和responseType無效了。

.post("/TasksTable/ExportData",{
          item: {          
            //傳入項目id，根據(jù)項目id來 搜素任務(wù)
            project_id: this.tasksinfo,
          },
          //頁的索引和頁的長度。
          PageSize: this.pageSize,
          PageIndex: this.currentPage,
        },
        {    
          //定義類型
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },     
          responseType:'blob',         
        })

把他們用兩個花括號隔開就可以了。最終成功導(dǎo)出！