不同的專案有不同的匯出需求，有些只匯出當前所顯示結果頁面的表格進入excel，這個時候就有很多外掛，比如vue-json-excel或者是Blob.js+Export2Excel.js來實現匯出Excel功能。但是有些需求因為資料量太大，成千上萬條資料，所以是需要後端拼接，然後輸出二進位制流檔案，然後前端直接下載，這次我們談談後者的做法。

　　Blob物件表示一個不可變、原始資料的類檔案物件，通常我也叫它二進位制流物件。我們可以通過Blob物件實現匯出Excel功能，先放上程式碼：

<el-button @click="exportExcel()">匯出</el-button>

<script>
methods: {
 exportExcel(){
  var params={
  XX:xx//額外需要攜帶的請求體
  }
  this.$axios.get('/XX/XX',{
  params: params,responseType: 'blob' //首先設定responseType欄位格式為 blob
  }).then(res => {
  console.log(res);
  let blob = new Blob([res],{type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"}); // 為blob設定檔案型別，這裡以.xlsx為例
  let url = window.URL.createObjectURL(blob); // 建立一個臨時的url指向blob物件
  let a = document.createElement("a");
  a.href = url;
  a.click();
  // 釋放這個臨時的物件url
  window.URL.revokeObjectURL(url); 
  });
 },}
</script>

　　'responseType'表示的是伺服器響應的資料型別，可以是'arrayBuffer'、'blob'、'document'、'json'、'txt'、'stream'，預設為json。axios官方文件地址：https://www.kancloud.cn/yunye/axios/234845（axios請求配置章節）。

　　所以我們接收後臺傳給前端的二進位制流之前需要先設定responseType為blob，否則預設會以json獲取，下載下來的檔案開啟會提示檔案已損壞。控制檯輸出的可以看到是個正確的Blob物件，這就說明我們的配置是對的，如圖1所示。

圖1 控制檯輸出的Blob物件

　　後端最好也要配置response頭的content-type為對應的型別，所圖2所示。

圖2 後端設定了響應頭相對應的content-type

　　然後，需要給這個Blob物件設定一個type，這個type表明改Blob物件所包含資料的MIME型別。如果型別未知，則該值為空字串。這裡給出幾個常用檔案格式的MIME型別：（詳細的可參考WebAPI官方文件：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types）

副檔名----------MIME型別

　　.csv--------------text/csv

　　.jpeg/.jpg-------image/jpeg

　　.png-------------image/png

　　.rar--------------application/x-rar-compressed

　　.doc-------------application/msword

　　.docx-----------application/vnd.openxmlformats-officedocument.wordprocessingml.document

　　.xls--------------application/vnd.ms-excel

.xlsx------------application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

　　.zip--------------application/zip

　　在正常的匯出請求之後可以看到又發了一個新的blob請求，其本質是到這個地址下載檔案，如圖3所示：

圖3 建立一個臨時的url指向blob物件

　　一般來說，這樣就可以實現下載的功能了。

　　這裡提點題外話，谷歌瀏覽器下載設定預設為瀏覽器下載預設路徑，也就不會彈出檔案框，谷歌瀏覽器下載檔案框如圖4所示，也就沒有了所謂的自定義儲存路徑和自定義檔名，如圖5所示，在瀏覽器底部會有下載提示。

圖4谷歌瀏覽器下載檔案框

圖5 谷歌瀏覽器下載會在螢幕底部顯示

　　如果想要有下載檔案框，請在設定->高階->下載內容->下載前詢問每個檔案的儲存位置中設定為啟用。

總結

到此這篇關於Vue通過Blob物件實現匯出Excel功能的文章就介紹到這了,更多相關vue 通過blob物件匯出excel內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！