快捷導(dǎo)航

vue進(jìn)行下載與處理二進(jìn)制流文件的方法詳解

更新時(shí)間：2023年12月15日 11:10:40 作者：UserGuan

這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)將后端返回的二進(jìn)制流進(jìn)行處理并實(shí)現(xiàn)下載,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

什么是二進(jìn)制流文件

二進(jìn)制文件是一種計(jì)算機(jī)文件格式，它的數(shù)據(jù)以二進(jìn)制形式存儲(chǔ)，與文本文件不同。二進(jìn)制文件可以包含任意類型的數(shù)據(jù)，例如圖像、音頻、視頻、可執(zhí)行文件、壓縮文件等，而文本文件則僅僅包含 ASCII 碼或其他編碼的字符數(shù)據(jù)。

二進(jìn)制文件的底層原理是將數(shù)據(jù)以二進(jìn)制形式存儲(chǔ)在文件中。在計(jì)算機(jī)中，所有的數(shù)據(jù)都是以二進(jìn)制形式表示的，包括數(shù)字、字符、圖像、音頻、視頻等。二進(jìn)制文件通過按照特定的格式將這些二進(jìn)制數(shù)據(jù)存儲(chǔ)在文件中，以便在需要時(shí)能夠正確地讀取和使用。

二進(jìn)制流常見的 Blob、ArrayBuffer、File、FileReader 和 FormData

二進(jìn)制流長啥樣？如下圖：

獲取二進(jìn)制流文件的方法

/** 獲取二進(jìn)制流文件
 * @param url 請(qǐng)求地址
 * @param params 請(qǐng)求參數(shù)
 * @param method 請(qǐng)求方式，默認(rèn)：'POST'
 * @param configType 設(shè)置響應(yīng)類型
 * 'arraybuffer'：設(shè)置響應(yīng)類型為二進(jìn)制對(duì)象(返回的是一個(gè)包含二進(jìn)制數(shù)據(jù)的 JavaScript ArrayBuffer 類型化數(shù)組)
 * 'blob'：設(shè)置響應(yīng)類型為二進(jìn)制對(duì)象(返回的是一個(gè)包含二進(jìn)制數(shù)據(jù)的 Blob 對(duì)象)
 * @returns {Promise<void>} 請(qǐng)求結(jié)果
 */
async getBinaryFile(url, params, method = 'POST', configType = 'arraybuffer') {
  const headConfig = {
    responseType: configType // 設(shè)置響應(yīng)類型
  }
  let res = {} // 請(qǐng)求結(jié)果
  switch (method.toLowerCase()) {
    case 'get':
      res = await axios.get(url, { params, ...headConfig }) // get 請(qǐng)求方式
      break
    case 'post':
      res = await axios.post(url, params, { ...headConfig }) // post 請(qǐng)求方式
      break
  }
  this.downloadBinaryFile(res.data, '項(xiàng)目介紹.txt') // 下載二進(jìn)制文件
},

下載二進(jìn)制流文件的方法

/** 下載二進(jìn)制流文件
 * @param binFile 二進(jìn)制文件流
 * @param fileName 文件名，例如：測(cè)試文本.txt
 * @param blobType Blob 對(duì)象的 type 屬性給出文件的 MIME 類型，默認(rèn)：'application/octet-stream'(用于通用二進(jìn)制數(shù)據(jù))
 */
downloadBinaryFile(binFile, fileName, blobType = 'application/octet-stream') {
  // 處理二進(jìn)制數(shù)據(jù)并創(chuàng)建 Blob 對(duì)象
  const blobObj = new Blob([binFile], { type: blobType })
  // 創(chuàng)建一個(gè)鏈接并設(shè)置下載屬性
  const downloadLink = document.createElement('a')
  let url = window.URL || window.webkitURL || window.moxURL // 兼容不同瀏覽器的 URL 對(duì)象
  url = url.createObjectURL(blobObj)
  downloadLink.href = url
  downloadLink.download = fileName // 設(shè)置下載的文件名
  // 將鏈接添加到 DOM 中，模擬點(diǎn)擊
  document.body.appendChild(downloadLink)
  downloadLink.click()
  // 移除創(chuàng)建的鏈接和釋放 URL 對(duì)象
  document.body.removeChild(downloadLink)
  window.URL.revokeObjectURL(url)
}

完整代碼

在 Vue.js 中，可以通過使用 axios 或其他類似的 HTTP 庫從后端獲取二進(jìn)制數(shù)據(jù)，并通過前端進(jìn)行處理以實(shí)現(xiàn)文件下載。以下是一個(gè)簡單的示例，使用 axios 和 Blob 對(duì)象來處理二進(jìn)制數(shù)據(jù)。

首先，確保你的 Vue 項(xiàng)目中已經(jīng)安裝了 axios 網(wǎng)絡(luò)請(qǐng)求庫

npm install axios

然后，在你的 Vue 組件中，可以這樣處理后端返回的二進(jìn)制流

<!-- 下載二進(jìn)制流文件 -->
<template>
  <div>
    <button @click="getBinaryFile('YOUR_BACKEND_API_ENDPOINT', { id: '' })">下載文件</button>
  </div>
</template>
 
<script>
import axios from 'axios'
 
export default {
  methods: {
    /** 獲取二進(jìn)制流文件
     * @param url 請(qǐng)求地址
     * @param params 請(qǐng)求參數(shù)
     * @param method 請(qǐng)求方式，默認(rèn)：'POST'
     * @param configType 設(shè)置響應(yīng)類型
     * 'arraybuffer'：設(shè)置響應(yīng)類型為二進(jìn)制對(duì)象(返回的是一個(gè)包含二進(jìn)制數(shù)據(jù)的 JavaScript ArrayBuffer 類型化數(shù)組)
     * 'blob'：設(shè)置響應(yīng)類型為二進(jìn)制對(duì)象(返回的是一個(gè)包含二進(jìn)制數(shù)據(jù)的 Blob 對(duì)象)
     * @returns {Promise<void>} 請(qǐng)求結(jié)果
     */
    async getBinaryFile(url, params, method = 'POST', configType = 'arraybuffer') {
      const headConfig = {
        responseType: configType // 設(shè)置響應(yīng)類型
      }
      let res = {} // 請(qǐng)求結(jié)果
      switch (method.toLowerCase()) {
        case 'get':
          res = await axios.get(url, { params, ...headConfig }) // get 請(qǐng)求方式
          break
        case 'post':
          res = await axios.post(url, params, { ...headConfig }) // post 請(qǐng)求方式
          break
      }
      this.downloadBinaryFile(res.data, '項(xiàng)目介紹.txt') // 下載二進(jìn)制文件
    },
    /** 下載二進(jìn)制流文件
     * @param binFile 二進(jìn)制文件流
     * @param fileName 文件名，例如：測(cè)試文本.txt
     * @param blobType Blob 對(duì)象的 type 屬性給出文件的 MIME 類型，默認(rèn)：'application/octet-stream'(用于通用二進(jìn)制數(shù)據(jù))
     */
    downloadBinaryFile(binFile, fileName, blobType = 'application/octet-stream') {
      // 處理二進(jìn)制數(shù)據(jù)并創(chuàng)建 Blob 對(duì)象
      const blobObj = new Blob([binFile], { type: blobType })
      // 創(chuàng)建一個(gè)鏈接并設(shè)置下載屬性
      const downloadLink = document.createElement('a')
      let url = window.URL || window.webkitURL || window.moxURL // 兼容不同瀏覽器的 URL 對(duì)象
      url = url.createObjectURL(blobObj)
      downloadLink.href = url
      downloadLink.download = fileName // 設(shè)置下載的文件名
      // 將鏈接添加到 DOM 中，模擬點(diǎn)擊
      document.body.appendChild(downloadLink)
      downloadLink.click()
      // 移除創(chuàng)建的鏈接和釋放 URL 對(duì)象
      document.body.removeChild(downloadLink)
      window.URL.revokeObjectURL(url)
    }
  }
}
</script>

確保替換 `YOUR_BACKEND_API_ENDPOINT` 為你的后端API的實(shí)際地址，并設(shè)置適當(dāng)?shù)奈募?/p>

這個(gè)例子中，我們使用了 axios 來獲取后端返回的二進(jìn)制數(shù)據(jù)，然后使用 Blob 對(duì)象創(chuàng)建一個(gè)包含該二進(jìn)制數(shù)據(jù)的 Blob，最后創(chuàng)建一個(gè)下載鏈接并模擬點(diǎn)擊以觸發(fā)文件下載。

注意：瀏覽器的同源策略可能會(huì)限制跨域請(qǐng)求。如果你的前端和后端不在同一個(gè)域下，你可能需要在后端配置 CORS(跨域資源共享)來允許前端訪問。

關(guān)于 Blob 的 content-type 的部分媒體類型

".*"="application/octet-stream"
".001"="application/x-001"
".301"="application/x-301"
".323"="text/h323"
".906"="application/x-906"
".907"="drawing/907"
".a11"="application/x-a11"
".acp"="audio/x-mei-aac"
".ai"="application/postscript"
".aif"="audio/aiff"
".aifc"="audio/aiff"
".aiff"="audio/aiff"
".anv"="application/x-anv"
".asa"="text/asa"
".asf"="video/x-ms-asf"
".asp"="text/asp"
".asx"="video/x-ms-asf"
".au"="audio/basic"
".avi"="video/avi"
".awf"="application/vnd.adobe.workflow"
".biz"="text/xml"
".bmp"="application/x-bmp"
".bot"="application/x-bot"
".c4t"="application/x-c4t"
".c90"="application/x-c90"
".cal"="application/x-cals"
".cat"="application/vnd.ms-pki.seccat"
".cdf"="application/x-netcdf"
".cdr"="application/x-cdr"
".cel"="application/x-cel"
".cer"="application/x-x509-ca-cert"
".cg4"="application/x-g4"
".cgm"="application/x-cgm"
".cit"="application/x-cit"
 
".doc"="application/msword"
".docx"="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
".rtf"="application/rtf"
".xls"="application/vnd.ms-excel application/x-excel"
".xlsx"="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
".ppt"="application/vnd.ms-powerpoint"
".pptx"="application/vnd.openxmlformats-officedocument.presentationml.presentation"
".pps"="application/vnd.ms-powerpoint"
".ppsx"="application/vnd.openxmlformats-officedocument.presentationml.slideshow"
".pdf"="application/pdf"
".swf"="application/x-shockwave-flash"
".dll"="application/x-msdownload"
".exe"="application/octet-stream"
".msi"="application/octet-stream"
".chm"="application/octet-stream"
".cab"="application/octet-stream"
".ocx"="application/octet-stream"
".rar"="application/octet-stream"
".tar"="application/x-tar"
".tgz"="application/x-compressed"
".zip"="application/x-zip-compressed"
".z"="application/x-compress"
".wav"="audio/wav"
".wma"="audio/x-ms-wma"
".wmv"="video/x-ms-wmv"
".mp3, .mp2, .mpe, .mpeg, .mpg"="audio/mpeg"
".rm"="application/vnd.rn-realmedia"
".mid, .midi, .rmi"="audio/mid"
".bmp"="image/bmp"
".gif"="image/gif"
".png"="image/png"
".tif, .tiff"="image/tiff"
".jpe, .jpeg, .jpg"="image/jpeg"
".txt"="text/plain"
".xml"="text/xml"
".html"="text/html"
".css"="text/css"
".js"="text/javascript"
".mht, .mhtml"="message/rfc822"