vue.js前端實現excel表格匯出和獲取headers裡的資訊

前段時間寫過一篇文章基於element實現後臺管理系統，並提到excel表格匯出功能，可能描述不是很詳細，現在單獨整理列出。

後端提供的介面：

// 下載分揀列表
export function getAssormentExport(params) {
  return request({
    url: `/manage/health/assorment/export?ids=` + params,
    responseType: `arraybuffer`, // 代表記憶體之中的一段二進位制資料 必須加
    method: `get`
  })
}

vue：點選按鈕呼叫介面

<el-button type="primary" size="mini" @click="addexport()">匯出選中</el-button>

script：

    // 匯出選中
    addexport() {
      if (this.multipleSelection.length <= 0) {
        this.$message({
          showClose: true,
          message: `未選中資料`,
          type: `error`
        })
        return
      }
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.ids.push(this.multipleSelection[i].id)
      } // push一個新的陣列，儲存需要匯出資訊的ID並傳給介面實現資料返回
      getAssormentExport(this.ids).then(
        function(response) {
          const filename = decodeURI(response.headers[`content-disposition`].split(`;`)[1].split(`=`)[1]) || `分揀表.xlsx`
          this.fileDownload(response.data, filename) // response.data是後端返回的二進位制資料流，filename是獲取到的匯出檔名，獲取失敗使用預設值
          this.ids = []
        }.bind(this)
      ).catch(
        function(error) {
          this.$message({
            showClose: true,
            message: error,
            type: `error`
          })
          this.ids = []
        }.bind(this)
      )
    },
    fileDownload(data, fileName) {
      const blob = new Blob([data], {
        type: `application/octet-stream`
      })
      const filename = fileName || `filename.xlsx`
      if (typeof window.navigator.msSaveBlob !== `undefined`) {
        window.navigator.msSaveBlob(blob, filename)
      } else {
        var blobURL = window.URL.createObjectURL(blob)
        var tempLink = document.createElement(`a`)
        tempLink.style.display = `none`
        tempLink.href = blobURL
        tempLink.setAttribute(`download`, filename)
        if (typeof tempLink.download === `undefined`) {
          tempLink.setAttribute(`target`, `_blank`)
        }
        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
        window.URL.revokeObjectURL(blobURL)
      }
    },

檢視呼叫介面返回的資訊

備註：

1.response返回了包含響應頭所帶的所有資料，可以使用console.log(response）檢視列印資料，但是列印出來的資料只能拿到預設的響應頭，這裡有個需要注意的地方。

• Cache-Control

• Content-Language

• Content-Type

• Expires

• Last-Modified

• Pragma

如果想讓瀏覽器能訪問到其他響應頭的話，需要後端在伺服器上設定Access-Control-Expose-Headers

Access-Control-Expose-Headers : `content-disposition`

後端大致寫法：

headers.add("Access-Control-Expose-Headers", "Content-Disposition");

這樣response.headers[`content-disposition`].split(`;`)[1].split(`=`)[1] 就能取到介面返回的檔名稱了。

2. decodeURI的使用

decodeURI() 函式可對 encodeURI() 函式編碼過的 URI 進行解碼。

例項

在本例中，我們將使用 decodeURI() 對一個編碼後的 URI 進行解碼：

<script type="text/javascript">

var test1="http://www.w3school.com.cn/My first/"

document.write(encodeURI(test1)+ "<br />")
document.write(decodeURI(test1))

</script>

輸出：

http://www.w3school.com.cn/My%20first/
http://www.w3school.com.cn/My first/