快捷導(dǎo)航

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

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

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

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

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

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

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

download() {
      // 簡(jiǎn)單的一個(gè)小節(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亂碼解決

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

開(kāi)始我懷疑自己哪里寫錯(cuò)了，經(jīng)過(guò)仔細(xì)的檢查，并沒(méi)有問(wèn)題。而且在后臺(tái)生成的excel并沒(méi)有任何問(wèn)題。

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

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

和我寫的一樣。在經(jīng)過(guò)了一天的檢查還是無(wú)果后，我問(wèn)了問(wèn)前輩，原來(lái)問(wèn)題出在這里。

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

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

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

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