快捷導(dǎo)航

JS二進(jìn)制流文件下載導(dǎo)出(接口返回二進(jìn)制流)亂碼處理方法

更新時(shí)間：2023年12月20日 11:20:37 作者：hzxOnlineOk

這篇文章主要介紹了JS二進(jìn)制流文件下載導(dǎo)出(接口返回二進(jìn)制流)亂碼處理方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

給下載文件起名字有兩種方式：

固定值+時(shí)間戳（一般都加上時(shí)間戳）
后端將文件名放到response的headers中返回，我們?nèi)≈诞?dāng)做文件名

使用react的同學(xué)注意了，fetch難設(shè)置亂碼轉(zhuǎn)碼，建議使用axios，用fetch親自嘗試失敗+10086次，下載下來(lái)的xlsx全是亂碼

平時(shí)在前端下載文件有兩種方式，一種是后臺(tái)提供一個(gè) 下載的http URL，然后用 window.open(URL)或者創(chuàng)建一個(gè)a標(biāo)簽的href屬性下載，另一種就是后臺(tái)直接返回文件的二進(jìn)制內(nèi)容，然后前端轉(zhuǎn)化一下再下載。

由于第一種方式比較簡(jiǎn)單，在此不做探討。本文主要講解一下第二種方式怎么實(shí)現(xiàn)。

Blob、ajax(axios)
mdn 上是這樣介紹 Blob 的：

Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類文件對(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)
})

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

一堆亂碼…

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

最后發(fā)現(xiàn)是參數(shù) responseType 的問(wèn)題，responseType 它表示服務(wù)器響應(yīng)的數(shù)據(jù)類型，由于后臺(tái)返回來(lái)的是二進(jìn)制數(shù)據(jù)，所以我們要把它設(shè)為 arraybuffer（如果后端傳遞過(guò)來(lái)約定的是blob，那么responseType應(yīng)該設(shè)置成這個(gè)responseType: 'blob'）
接下來(lái)再看看結(jié)果是否正確。

axios({
  method: 'post',
  url: '/export',
  responseType: 'arraybuffer',
  // responseType: 'blob'
})
.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)
})

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

根據(jù)后臺(tái)接口內(nèi)容決定是否下載文件
作者的項(xiàng)目有大量的頁(yè)面都有下載文件的需求，而且這個(gè)需求還有點(diǎn)變態(tài)。

具體需求如下

如果下載文件的數(shù)據(jù)量條數(shù)符合要求，正常下載（每個(gè)頁(yè)面限制下載數(shù)據(jù)量是不一樣的，所以不能在前端寫死）。
如果文件過(guò)大，后臺(tái)返回 { code: 199999, msg: '文件過(guò)大，請(qǐng)重新設(shè)置查詢項(xiàng)', data: null }，然后前端再進(jìn)行報(bào)錯(cuò)提示。
先來(lái)分析一下，首先根據(jù)上文，我們都知道下載文件的接口響應(yīng)數(shù)據(jù)類型為 arraybuffer。返回的數(shù)據(jù)無(wú)論是二進(jìn)制文件，還是 JSON 字符串，前端接收到的其實(shí)都是 arraybuffer。所以我們要對(duì) arraybuffer 的內(nèi)容作個(gè)判斷，在接收到數(shù)據(jù)時(shí)將它轉(zhuǎn)換為字符串，判斷是否有 code: 199999。如果有，則報(bào)錯(cuò)提示，如果沒有，則是正常文件，下載即可。具體實(shí)現(xiàn)如下：

axios.interceptors.response.use(response => {
    const res = response.data
    // 判斷響應(yīng)數(shù)據(jù)類型是否 ArrayBuffer，true 則是下載文件接口，false 則是正常接口
    if (res instanceof ArrayBuffer) {
        const utf8decoder = new TextDecoder()
        const u8arr = new Uint8Array(res)
        // 將二進(jìn)制數(shù)據(jù)轉(zhuǎn)為字符串
        const temp = utf8decoder.decode(u8arr)
        if (temp.includes('{code:199999')) {
            Message({
                // 字符串轉(zhuǎn)為 JSON 對(duì)象
                message: JSON.parse(temp).msg,
                type: 'error',
                duration: 5000,
            })
            return Promise.reject()
        }
    }
    // 正常類型接口，省略代碼...
    return res
}, (error) => {
    // 省略代碼...
    return Promise.reject(error)
})

react fetch（react方案）

const qryurl = `/offapi/liveaum/exportExcelData`;
    fetch(qryurl, {
      method: 'POST',
      credentials: 'include',
      headers: { Accept: 'application/json', 'Content-Type': 'application/json;charset=UTF-8' },
      body: JSON.stringify(params),
    }).then(response => {
      if (response.ok) {
        let downloadFileName = decodeURIComponent(response.headers.get('filename'));
        this.setState({ downloadFileName, downModalShow: true, iconLoading: false });
        response.blob().then(blob => {
          downBlob = blob;
        });
      }
    }).catch(function(err) {
      console.log(err);
      downBlob = null;
      message.warning('暫未查詢到數(shù)據(jù)');
      this.setState({ iconLoading: false })
    });
// 導(dǎo)出文件
  handleOk = () => {
    const link = document.createElement('a');
    link.style.display = 'none';
    link.href = URL.createObjectURL(downBlob);
    link.download = `${this.state.downloadFileName}.xls`;
    document.body.appendChild(link);
    link.click();
    URL.revokeObjectURL(link.href);
    document.body.removeChild(link);
    message.success('下載成功');
    this.onModalclose();
  };

到此這篇關(guān)于JS二進(jìn)制流文件下載導(dǎo)出(接口返回二進(jìn)制流)亂碼處理的文章就介紹到這了,更多相關(guān)js二進(jìn)制文件下載導(dǎo)出內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: