一次在vue中使用post進行excel表下載的實戰記錄

Posted on by

一、一般大傢下載excel都是使用get方法，直接點擊下載

就像這樣，我就不多說瞭，大傢應該都可以的啦 🏃‍♀️

 <!-- 導出提示框 -->
    <Modal
      title="導出"
      :show.sync="exportVisible"
      :showfooter="false"
      @close="closeExportFiles"
    >
      <exportFiles
        ref="exportFilesDom"
        :model="exportForm"
        export-url="導出鏈接"
      />
    </Modal>

二、vue用post下載excel表

這次因為導出的excel文件表頭有點復雜，後端弄瞭很久並且是個post請求，我就自己也重新寫的

後端發來的下載的話是文件流，獲取到的數據是亂碼，需要轉blob然後進行下載，下載的話就是使用普遍的在網頁上創建一個 a 鏈接，然後掛載上 a 鏈接這樣的方法，點擊下載

三、下面是具體的實現

3.1 post的封裝

將請求方法封裝瞭一下,因為以前的方法都在判斷響應的 code 等於200，我前期做的時候請求一直再走 catch 裡面，我萌瞭很久，我太菜瞭，最後發現返回的是亂碼，沒有返回code什麼的，所以在axios的響應函數裡面一直在走 Promise.reject(),就走catch裡面,所以封裝瞭下面的方法

// 文件下載導出
http.exportExcel = (url,data,config) => {
  return instance.post(url,data,config).then(res => {
        return res
  })
}

url：請求地址

data：請求參數 3.config：請求時轉為blob，所以需要設置 responseType:'blob'

3.2 請求的方法

主要代碼解釋都放在下面的註釋中瞭，就不再重新解釋瞭，主要是設置請求頭中的 responseType:'blob'

async reportExport(type){
        // console.log(this.multipleSelection)
        this.type = type
        if(type === 2 ){
          if(this.multipleSelection.length<=0){
            return this.$message.error('請先選擇要導出的數據')
          }
        }
        let ids = []
        for(let obj of this.multipleSelection){
            ids.push(obj.id)
        }
        let form1 = {
              type:type,
              ids:ids,
              date:this.dayTime,          
              }
        let infoMessage =  this.$message.info('請稍後正在導出中') // 這個是拿到element中this.$message的實力對象，後面調用close關閉
       try {
       // responseType:'blob' 重點，設置將後端傳回的數據進行blob轉化，不然亂碼
          const data = await this.$http.exportExcel('請求的url',form1,{responseType:'blob'})
          this.download(data) // 導出excel，這個方法下面會有解釋
          infoMessage.close() // 關閉上方的提示信息，不然兩個提示信息會同時出現
          this.$message.success('導出成功')
      } catch (error) {
        console.log(error)
      } 
    },

3.3 download下載方法的封裝

// 下載文件
    download (data) {
        if (!data) {
            return
        }
        window.URL = window.URL || window.webkitURL // 兼容性
        // 創建一個 URL 這個 URL 的生命周期和創建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。
        let url = window.URL.createObjectURL(new Blob([data])) 
        let link = document.createElement('a') // 創建一個a元素
        link.style.display = 'none' // 讓a元素在頁面中隱藏
        link.href = url // 綁定 a 元素的 href 為當前的url
        let exportName = this.type == 1 ? this.dayTime : this.belongMonth
        link.setAttribute('download', `${exportName}.xlsx`) // 設置 a 元素 download屬性，屬性名為後面的值 
        document.body.appendChild(link) // 添加到頁面中
        link.click() // 點擊a元素 下載excel文件
        window.URL.revokeObjectURL(url) //卸載url，釋放內存
    },

1.window.webkitURL是[webkit]內核的實現（一般手機上就是使用這個），window.webkitURL和window.URL是一樣的，window.URL是標準定義，所以做一個兼容

2.標簽變量名.setAttribute("屬性名","屬性值");害怕大傢寫多瞭框架，忘瞭這些哈哈哈哈

四、總結

在使用post請求，後端返回的data為亂碼時，不能判斷 返回數據的 code==200，然後就是需要在請求頭裡面的 responseType:'blob'，就OK啦。

到此這篇關於一次在vue中使用post進行excel表下載的文章就介紹到這瞭,更多相關vue用post下載excel表內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：