亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端下載二進(jìn)制流文件

lidashuang / 3378人閱讀

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

更多文章

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

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

Blob、ajax(axios)

mdn 上是這樣介紹 Blob 的：

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

具體使用方法

axios({
  method: "post",
  url: "/export",
})
.then(res => {
  // 假設(shè) data 是返回來的二進(jìn)制數(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)
})

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

一堆亂碼...

一定有哪里不對。

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

axios({
  method: "post",
  url: "/export",
  responseType: "arraybuffer",
})
.then(res => {
  // 假設(shè) data 是返回來的二進(jìn)制數(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)容也是正常的，不再是亂碼。

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/106132.html

相關(guān)文章

  • 關(guān)于前端實(shí)現(xiàn)文件下載功能

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

    Arno 評論0 收藏0

  • node實(shí)現(xiàn)文件下載不得不說的那些事兒

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

    Coly 評論0 收藏0

  • 前端下載 圖片 總結(jié)

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

    Freelander 評論0 收藏0

  • 前端下載 圖片 總結(jié)

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

    cgspine 評論0 收藏0

發(fā)表評論

0條評論

lidashuang

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<