陜西省人民政府網(wǎng)百度推廣關(guān)鍵詞優(yōu)化
什么是二進(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)制流長(zhǎng)啥樣?如下圖:
獲取二進(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)求方式breakcase '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 = urldownloadLink.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 庫(kù)從后端獲取二進(jìn)制數(shù)據(jù),并通過前端進(jìn)行處理以實(shí)現(xiàn)文件下載。以下是一個(gè)簡(jiǎn)單的示例,使用 axios 和 Blob 對(duì)象來(lái)處理二進(jìn)制數(shù)據(jù)。
首先,確保你的 Vue 項(xiàng)目中已經(jīng)安裝了 axios?網(wǎng)絡(luò)請(qǐng)求庫(kù)
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)求方式breakcase '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 = urldownloadLink.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 來(lái)獲取后端返回的二進(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(跨域資源共享)來(lái)允許前端訪問。
關(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"
關(guān)于 responseType 的值
"" - 設(shè)為空字符串與設(shè)置為 "text" 相同,默認(rèn)類型
"text" - 返回的是包含在 DOMString 對(duì)象中的文本
"document" - 返回的是一個(gè) HTML Document 或 XML XMLDocument
"arraybuffer" - 返回的是一個(gè)包含二進(jìn)制數(shù)據(jù)的 JavaScript ArrayBuffer
"blob" - 返回的是一個(gè)包含二進(jìn)制數(shù)據(jù)的 Blob 對(duì)象
"json" - 返回的是一個(gè) JavaScript 對(duì)象。這個(gè)對(duì)象是通過將接收到的數(shù)據(jù)類型視為 JSON 解析得到的
"ms-stream" - 返回的是下載流的一部分;此響應(yīng)類型僅允許下載請(qǐng)求,并且僅受 Internet Explorer 支持