成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

lidashuang / 3311人閱讀

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

更多文章

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

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

Blob、ajax(axios)

mdn 上是這樣介紹 Blob 的：

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

具體使用方法

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

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

一堆亂碼...

一定有哪里不對(duì)。

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

axios({
  method: "post",
  url: "/export",
  responseType: "arraybuffer",
})
.then(res => {
  // 假設(shè) data 是返回來(lái)的二進(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)
})

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106132.html

相關(guān)文章

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

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

    Arno 評(píng)論0 收藏0

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

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

    Coly 評(píng)論0 收藏0

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

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

    Freelander 評(píng)論0 收藏0

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

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

    cgspine 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<