之前在專案中碰到了一個表格匯出的功能，但是跟以前做過的匯出完全不同。 以前做過的匯出功能是這樣的：後端提供一個匯出介面，呼叫該介面會返回一個檔案下載連結，然後將連結塞到標籤的屬性中，再透過觸發標籤的點選事件下載該檔案。 而這次的功能卻是：後端提供一個匯出介面，呼叫該介面成功的話會直接返回一個二進位制流資料，如果匯出過程中出現錯誤則會返回一個json格式的資料。在成功的情況下，前端需要將該二進位制流資料轉成檔案並下載，在失敗的情況下則需要根據返回資料的狀態碼和訊息自動進行錯誤提示和其他操作。 對於下載二進位制檔案，作者在曾經的需求中做過類似的功能，可以直接將二進位制流的內容轉換成 Blob 物件，然後透過這個物件建立一個 ，之後重複上面 標籤的操作即可。 確定了思路，就開始碼程式碼了。專案中使用的是作為網路請求庫，後端返回的資料會在請求成功後返回的中，在拿到返回的資料後，透過下面這行程式碼將二進位制流轉換成了Blob物件並建立下載連結後下載：

正常來說到這一步就結束了，在後端匯出失敗時，前端成功進入了失敗的邏輯；但是在介面呼叫成功並且後端也給了二進位制流的情況下，開啟匯出的檔案發現是亂碼。在多次對程式碼進行檢查後，確保匯出的程式碼並沒有問題。那麼問題出在哪了呢？難道是請求發起時就出錯了麼？於是又去檢查請求頭，發現，由於返回型別的錯誤導致匯出時出現了錯誤，於是將這個欄位的值修改成了，表示希望返回的資料型別是一個流檔案。 但是到這裡問題又來了，如果返回型別是，那如果匯出失敗，本應返回的格式資料也會變成，這種情況下就需要我自己對這個流進行處理，判斷它是匯出失敗的json，還是匯出成功的流檔案，於是在上面的匯出程式碼之前添加了一些轉json的操作： 透過上面的程式碼，就能夠基本完美實現業務需求了。但是在實際測試過程中，又發現了兩個坑： 火狐瀏覽器上a標籤點選匯出無效。解決方法：需要先將a標籤新增到當前頁面上，再執行click，之後再移除該節點，而不能直接執行click；在IE和Edge瀏覽器上無效。對於這一點，如果你的專案不需要支援這兩款瀏覽器可以直接忽略，如果需要支援，可以繼續往下看。相容 IE & EDGE導致在IE和EDGE上不相容的原因是，這兩款瀏覽器無法透過a標籤直接下載blob物件，但是解決方法卻非常簡單： 首先判斷當前瀏覽器是否是IE/EDGE；如果不是，則走正常流程；如果是，則走下面這行程式碼：IE 和 EDGE 中提供了一個專門的方法來下載Blob物件，講真，這個方法還是非常好用的，一行程式碼就能夠搞定~ 以上就是完整的二進位制流檔案前端匯出的方法，感興趣的小夥伴可以試著將完整的demo寫一下哦~對於程式碼中用到的物件及方法，就不再贅述了，小夥伴們可以自己去查閱文件，這樣會記得更深！