前端下載二進制流文件

lidashuang 發(fā)布于2019-08-26 10:25 / 3300人閱讀

摘要：更多文章平時在前端下載文件有兩種方式，一種是后臺提供一個，然后用下載，另一種就是后臺直接返回文件的二進制內(nèi)容，然后前端轉化一下再下載。假設是返回來的二進制數(shù)據(jù)這次沒有問題，文件能正常打開，內(nèi)容也是正常的，不再是亂碼。

更多文章

平時在前端下載文件有兩種方式，一種是后臺提供一個 URL，然后用 window.open(URL) 下載，另一種就是后臺直接返回文件的二進制內(nèi)容，然后前端轉化一下再下載。

由于第一種方式比較簡單，在此不再敘述。接下來主要講解一下第二種方式怎么實現(xiàn)。

Blob、ajax(axios)

mdn 上是這樣介紹 Blob 的：

Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)

具體使用方法

axios({
  method: "post",
  url: "/export",
})
.then(res => {
  // 假設 data 是返回來的二進制數(shù)據(jù)
  const data = res.data
  const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
  const link = document.createElement("a")
  link.style.display = "none"
  link.href = url
  link.setAttribute("download", "excel.xlsx")
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
})

打開下載的文件，看看結果是否正確。

一堆亂碼...

一定有哪里不對。

最后發(fā)現(xiàn)是參數(shù) responseType 的問題，responseType 它表示服務器響應的數(shù)據(jù)類型，由于后臺返回來的是二進制數(shù)據(jù)，所以我們要把它設為 arraybuffer，
接下來再看看結果是否正確。

axios({
  method: "post",
  url: "/export",
  responseType: "arraybuffer",
})
.then(res => {
  // 假設 data 是返回來的二進制數(shù)據(jù)
  const data = res.data
  const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
  const link = document.createElement("a")
  link.style.display = "none"
  link.href = url
  link.setAttribute("download", "excel.xlsx")
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
})

這次沒有問題，文件能正常打開，內(nèi)容也是正常的，不再是亂碼。

GPU云服務器云服務器文件流二進制 ajax二進制流 asp讀取二進制流二進制流讀取 fread

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106132.html

關于前端實現(xiàn)文件下載功能

摘要：問題以上兩種方式，當在下載格式，或者視頻文件時，瀏覽器會直接播放該文件，而達不到直接下載的功能，此時，當下載音視頻文件時無法使用以上兩種方式。 1、通過window.open()打開新頁面下載文件 window.open(`url`, _self) 使用場景：下載excel文件，后端提供接口，接口返回的是文件流，可以直接使用window.open()，最簡單的方式。優(yōu)點：最簡潔；弊...

Arno 2019-08-23 17:54 評論0 收藏0
node實現(xiàn)文件下載不得不說的那些事兒

摘要：如果像本例中這樣的場景會遇到這樣一個問題，詳見鏈接當請求參數(shù)過長或為了安全，就需要用到下載。寫到這里自己都忍不住想錘自己，給自己挖坑不說，這樣來回請求下載，流量，真的是敗家。這幾天一直在做遠程文件下載的事，現(xiàn)在總算有了解決，特來記錄一下踩過的坑和想揍自己的心需求應用場景是這樣的，底層邏輯數(shù)據(jù)請求接口是由Java寫的，也就是說原始文件存在Java服務端,返回時有加密措施由于工作...

Coly 2019-08-23 14:12 評論0 收藏0
前端下載圖片總結

摘要：這時候后臺要提供一個請求的服務，并設置消息響應頭，告訴瀏覽器該文件需要下載。前端下載圖片總結前端下載圖片分為兩大類：一是服務端配合實現(xiàn)（即下載后臺服務提供的資源）；二是純前端下載 1、服務端配合實現(xiàn) 這種情況對于前端開發(fā)非常簡單，只需要一個a標簽，如：下載圖片當直接訪問的某個文件時，如果該文件是二進制等瀏覽器無法解析的文件，瀏覽器才會下載該文件，但如果瀏覽器可以自己...

Freelander 2019-08-02 11:56 評論0 收藏0
前端下載圖片總結

摘要：這時候后臺要提供一個請求的服務，并設置消息響應頭，告訴瀏覽器該文件需要下載。前端下載圖片總結前端下載圖片分為兩大類：一是服務端配合實現(xiàn)（即下載后臺服務提供的資源）；二是純前端下載 1、服務端配合實現(xiàn) 這種情況對于前端開發(fā)非常簡單，只需要一個a標簽，如：下載圖片當直接訪問的某個文件時，如果該文件是二進制等瀏覽器無法解析的文件，瀏覽器才會下載該文件，但如果瀏覽器可以自己...

cgspine 2019-08-23 12:53 評論0 收藏0