前端使用Blob下載文件的幾種方式
在前端下載文件是個(gè)很通用的需求,一般后端會(huì)提供下載的方式有兩種:
1.直接返回文件的網(wǎng)絡(luò)地址(一般用在靜態(tài)文件上,比如圖片以及各種音視頻資源等)
2.返回文件流(一般用在動(dòng)態(tài)文件上,比如根據(jù)前端選擇,導(dǎo)出不同的統(tǒng)計(jì)結(jié)果 excel 等)
第一種方式比較簡(jiǎn)單,但是使用場(chǎng)景有限。
第二種方式通用性更好
我們先一下第一種的使用場(chǎng)景:
- a鏈接
<a rel="external nofollow" rel="external nofollow" >下載文件</a>
我們可以通過(guò)download屬性,可以實(shí)現(xiàn)對(duì)下載的文件進(jìn)行重命名。
<a rel="external nofollow" rel="external nofollow" download="附件.pdf">下載文件</a>
- 還可以使用編程式的寫法:
1.location的href
<script> function Download() { window.location.href = 'www.baidu.pdf' } </script>
2.window.open
<script> function Download() { window.open('www.baidu.pdf') } </script>
億點(diǎn)小知識(shí):在使用window.open的時(shí)候在除Google Chrome 瀏覽器會(huì)攔截內(nèi)容但在其他瀏覽器是可以直接下載的
- 如果要想Google Chrome 設(shè)置里面更改
第二種 使用blob文件流下載
<script> function Download() { axios({ url: "www.baidu.pdf", method: 'GET', responseType: 'blob', // 這里就是轉(zhuǎn)化為blob文件流,指定響應(yīng)類型為二進(jìn)制數(shù)據(jù) headers: { // 'Content-Type': 'application/json; application/octet-stream', token: 'sss' // 可以攜帶token } }).then(res => { const href = URL.createObjectURL(res.data) const link = document.createElement('a') link.download = '附件.pdf' link.href = href link.click() document.body.removeChild(link); URL.revokeObjectURL(href); // 釋放內(nèi)存 }) } </script>
下面封裝了一個(gè) blob的方法邏輯 感興趣的可以參考一下
// 下載 const DownloadFile = (row: any) => { contractApi .xxxApi({ fullFileName: row.filePath }) .then((blob: any) => { row.fileFormat = row.filePath.split('.')[row.filePath.split('.').length - 1] download(blob, row.fileFormat, row.fileName) }) }
// file:文件流(一般指后端返回的流或者上傳文件event.target.files[0]); fileType:文件類型/MIME類型;fileName:文件名稱 export function download(file: any, fileType: string, fileName?: string) { const blob = new Blob([file], { fileType}) const downloadElement = document.createElement('a') const href = window.URL.createObjectURL(blob) // 創(chuàng)建下載的鏈接 downloadElement.href = href downloadElement.download = fileName // 下載后文件名 document.body.appendChild(downloadElement) downloadElement.click() // 點(diǎn)擊下載 document.body.removeChild(downloadElement) // 下載完成移除元素 window.URL.revokeObjectURL(href) // 釋放掉blob對(duì)象 } // download(blobStream,{ 'Content-Type': 'application/vnd.ms-excel;charset=utf-8' })
三、Blob
1、Blob 是什么
Blob(Binary Large Object)表示二進(jìn)制類型的大對(duì)象。在數(shù)據(jù)庫(kù)管理系統(tǒng)中,將二進(jìn)制數(shù)據(jù)存儲(chǔ)為一個(gè)單一個(gè)體的集合。Blob 通常是影像、聲音或多媒體文件。在 JavaScript 中 Blob 類型的對(duì)象表示不可變的類似文件對(duì)象的原始數(shù)據(jù)。 為了更直觀的感受 Blob 對(duì)象,我們先來(lái)使用 Blob 構(gòu)造函數(shù),創(chuàng)建一個(gè) myBlob 對(duì)象,具體如下圖所示:
如你所見(jiàn),myBlob 對(duì)象含有兩個(gè)屬性:size 和 type。其中 size
屬性用于表示數(shù)據(jù)的大?。ㄒ宰止?jié)為單位),type
是 MIME 類型的字符串。Blob 表示的不一定是 JavaScript 原生格式的數(shù)據(jù)。比如 File
接口基于 Blob
,繼承了 blob 的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件。·
2、Blob API 簡(jiǎn)介
Blob
由一個(gè)可選的字符串 type
(通常是 MIME 類型)和 blobParts
組成:
MIME(Multipurpose Internet Mail Extensions)多用途互聯(lián)網(wǎng)郵件擴(kuò)展類型,是設(shè)定某種擴(kuò)展名的文件用一種應(yīng)用程序來(lái)打開(kāi)的方式類型,當(dāng)該擴(kuò)展名文件被訪問(wèn)的時(shí)候,瀏覽器會(huì)自動(dòng)使用指定應(yīng)用程序來(lái)打開(kāi)。多用于指定一些客戶端自定義的文件名,以及一些媒體文件打開(kāi)方式。·
常見(jiàn)的 MIME 類型有:超文本標(biāo)記語(yǔ)言文本 .html text/html、PNG圖像 .png image/png、普通文本 .txt text/plain 等。
2.1 構(gòu)造函數(shù)
Blob 構(gòu)造函數(shù)的語(yǔ)法為:
var aBlob = new Blob(blobParts, options);
相關(guān)的參數(shù)說(shuō)明如下:·
- blobParts:它是一個(gè)由 ArrayBuffer,ArrayBufferView,Blob,DOMString 等對(duì)象構(gòu)成的數(shù)組。DOMStrings 會(huì)被編碼為 UTF-8。
- options:一個(gè)可選的對(duì)象,包含以下兩個(gè)屬性:
- type —— 默認(rèn)值為
""
,它代表了將會(huì)被放入到 blob 中的數(shù)組內(nèi)容的 MIME 類型。 - endings —— 默認(rèn)值為
"transparent"
,用于指定包含行結(jié)束符\n
的字符串如何被寫入。它是以下兩個(gè)值中的一個(gè):"native"
,代表行結(jié)束符會(huì)被更改為適合宿主操作系統(tǒng)文件系統(tǒng)的換行符,或者"transparent"
,代表會(huì)保持 blob 中保存的結(jié)束符不變。
- type —— 默認(rèn)值為
示例一:從字符串創(chuàng)建 Blob
let myBlobParts = ['<html><h2>Hello Semlinker</h2></html>']; // an array consisting of a single DOMString let myBlob = new Blob(myBlobParts, {type : 'text/html', endings: "transparent"}); // the blob console.log(myBlob.size + " bytes size"); // Output: 37 bytes size console.log(myBlob.type + " is the type"); // Output: text/html is the type
示例二:從類型化數(shù)組和字符串創(chuàng)建 Blob
let hello = new Uint8Array([72, 101, 108, 108, 111]); // 二進(jìn)制格式的 "hello" let blob = new Blob([hello, ' ', 'semlinker'], {type: 'text/plain'});
介紹完 Blob 構(gòu)造函數(shù),接下來(lái)我們來(lái)分別介紹 Blob 類的屬性和方法:
2.2 屬性
前面我們已經(jīng)知道 Blob 對(duì)象包含兩個(gè)屬性:·
- size(只讀):表示
Blob
對(duì)象中所包含數(shù)據(jù)的大?。ㄒ宰止?jié)為單位)。 - type(只讀):一個(gè)字符串,表明該
Blob
對(duì)象所包含數(shù)據(jù)的 MIME 類型。如果類型未知,則該值為空字符串。
2.3 方法
- slice([start[, end[, contentType]]]):返回一個(gè)新的 Blob 對(duì)象,包含了源 Blob 對(duì)象中指定范圍內(nèi)的數(shù)據(jù)。
- stream():返回一個(gè)能讀取 blob 內(nèi)容的
ReadableStream
。 - text():返回一個(gè) Promise 對(duì)象且包含 blob 所有內(nèi)容的 UTF-8 格式的
USVString
。 - arrayBuffer():返回一個(gè) Promise 對(duì)象且包含 blob 所有內(nèi)容的二進(jìn)制格式的
ArrayBuffer
。
這里我們需要注意的是,Blob
對(duì)象是不可改變的。我們不能直接在一個(gè) Blob 中更改數(shù)據(jù),但是我們可以對(duì)一個(gè) Blob 進(jìn)行分割,從其中創(chuàng)建新的 Blob 對(duì)象,將它們混合到一個(gè)新的 Blob 中。這種行為類似于 JavaScript 字符串:我們無(wú)法更改字符串中的字符,但可以創(chuàng)建新的更正后的字符串。
3、Blob 使用場(chǎng)景
3.1 分片上傳
File 對(duì)象是特殊類型的 Blob,且可以用在任意的 Blob 類型的上下文中。所以針對(duì)大文件傳輸?shù)膱?chǎng)景,我們可以使用 slice 方法對(duì)大文件進(jìn)行切割,然后分片進(jìn)行上傳,具體示例如下:
const file = new File(["muzidigbig".repeat(1000000)], "test.txt"); const chunkSize = 40000; const url = "https://httpbin.org/post"; async function chunkedUpload() { for (let start = 0; start < file.size; start += chunkSize) { const chunk = file.slice(start, start + chunkSize + 1); const fd = new FormData(); fd.append("data", chunk); await fetch(url, { method: "post", body: fd }).then((res) => res.text() ); } }
3.2 從互聯(lián)網(wǎng)下載數(shù)據(jù)
我們可以使用以下方法從互聯(lián)網(wǎng)上下載數(shù)據(jù)并將數(shù)據(jù)存儲(chǔ)到 Blob 對(duì)象中,比如:
const downloadBlob = (url, callback) => { const xhr = new XMLHttpRequest() xhr.open('GET', url) xhr.responseType = 'blob' // xhr.headers = { 'Content-Type': 'application/json; application/octet-stream' }, xhr.onload = () => { callback(xhr.response) } xhr.send(null) }
當(dāng)然除了使用 XMLHttpRequest
API 之外,我們也可以使用 fetch
API 來(lái)實(shí)現(xiàn)以流的方式獲取二進(jìn)制數(shù)據(jù)。這里我們來(lái)看一下如何使用 fetch API 獲取線上圖片并本地顯示,具體實(shí)現(xiàn)如下:
const myImage = document.querySelector('img'); const myRequest = new Request('flowers.jpg'); fetch(myRequest) .then(function(response) { return response.blob(); }) .then(function(myBlob) { let objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; });
當(dāng) fetch 請(qǐng)求成功的時(shí)候,我們調(diào)用 response 對(duì)象的 blob()
方法,從 response 對(duì)象中讀取一個(gè) Blob 對(duì)象,然后使用 createObjectURL()
方法創(chuàng)建一個(gè) objectURL,然后把它賦值給 img
元素的 src
屬性從而顯示這張圖片。·
3.3 blob轉(zhuǎn)file
let obj = { age: 18, sex: '男' } let content = JSON.stringify(obj) // blob類型 let blob = new Blob([content], { type: 'application/json' }) // 將blob轉(zhuǎn)成url let url = URL.createObjectURL(blob) //blob:null/244bec7f-e3d3-43d5-803e-f98cc5c8117f =>鏈接里面的數(shù)據(jù)就是右邊的內(nèi)容 {"age":18,"sex":"男"} console.log(url) //blob轉(zhuǎn)file let filename = '文件名' var file = new File([blob], filename, { type: 'application/json', lastModified: Date.now() }); //或者 var file1 = new File([content], filename, { type: 'application/json', lastModified: Date.now() }); console.log("文件", file, file1)
3.4 Blob 用作 URL
Blob 可以很容易的作為 <a>
、<img>
或其他標(biāo)簽的 URL,多虧了 type
屬性,我們也可以上傳/下載 Blob
對(duì)象。下面我們將舉一個(gè) Blob 文件下載的示例,不過(guò)在看具體示例前我們得簡(jiǎn)單介紹一下 Blob URL。
1.Blob URL/Object URL
Blob URL/Object URL 是一種偽協(xié)議,允許 Blob 和 File 對(duì)象用作圖像,下載二進(jìn)制數(shù)據(jù)鏈接等的 URL 源。在瀏覽器中,我們使用 URL.createObjectURL
方法來(lái)創(chuàng)建 Blob URL,該方法接收一個(gè) Blob
對(duì)象,并為其創(chuàng)建一個(gè)唯一的 URL,其形式為 blob:<origin>/<uuid>
,對(duì)應(yīng)的示例如下:
blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f641
瀏覽器內(nèi)部為每個(gè)通過(guò) URL.createObjectURL
生成的 URL 存儲(chǔ)了一個(gè) URL → Blob 映射。因此,此類 URL 較短,但可以訪問(wèn) Blob
。生成的 URL 僅在當(dāng)前文檔打開(kāi)的狀態(tài)下才有效。它允許引用 <img>
、<a>
中的 Blob
,但如果你訪問(wèn)的 Blob URL 不再存在,則會(huì)從瀏覽器中收到 404 錯(cuò)誤。·
上述的 Blob URL 看似很不錯(cuò),但實(shí)際上它也有副作用。雖然存儲(chǔ)了 URL → Blob 的映射,但 Blob 本身仍駐留在內(nèi)存中,瀏覽器無(wú)法釋放它。映射在文檔卸載時(shí)自動(dòng)清除,因此 Blob 對(duì)象隨后被釋放。
但是,如果應(yīng)用程序壽命很長(zhǎng),那不會(huì)很快發(fā)生。因此,如果我們創(chuàng)建一個(gè) Blob URL,即使不再需要該 Blob,它也會(huì)存在內(nèi)存中。
針對(duì)這個(gè)問(wèn)題,我們可以調(diào)用 URL.revokeObjectURL(url)
方法,從內(nèi)部映射中刪除引用,從而允許刪除 Blob(如果沒(méi)有其他引用),并釋放內(nèi)存。接下
2.Blob 文件下載示例
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Blob 文件下載示例</title> </head> <body> <button id="downloadBtn">文件下載</button> <script src="index.js"></script> </body> </html>
index.js
const download = (fileName, blob) => { const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = fileName; link.click(); link.remove(); URL.revokeObjectURL(link.href); }; const downloadBtn = document.querySelector("#downloadBtn"); downloadBtn.addEventListener("click", (event) => { const fileName = "blob.txt"; const myBlob = new Blob(["一文徹底掌握 Blob Web API"], { type: "text/plain" }); download(fileName, myBlob); });
在示例中,我們通過(guò)調(diào)用 Blob 的構(gòu)造函數(shù)來(lái)創(chuàng)建類型為 “text/plain” 的 Blob 對(duì)象,然后通過(guò)動(dòng)態(tài)創(chuàng)建 a
標(biāo)簽來(lái)實(shí)現(xiàn)文件的下載。·
3.5 Blob 轉(zhuǎn)換為 Base64
URL.createObjectURL
的一個(gè)替代方法是,將 Blob
轉(zhuǎn)換為 base64 編碼的字符串。Base64 是一種基于 64 個(gè)可打印字符來(lái)表示二進(jìn)制數(shù)據(jù)的表示方法,它常用于在處理文本數(shù)據(jù)的場(chǎng)合,表示、傳輸、存儲(chǔ)一些二進(jìn)制數(shù)據(jù),包括 MIME 的電子郵件及 XML 的一些復(fù)雜數(shù)據(jù)。
在 MIME 格式的電子郵件中,base64 可以用來(lái)將二進(jìn)制的字節(jié)序列數(shù)據(jù)編碼成 ASCII 字符序列構(gòu)成的文本。使用時(shí),在傳輸編碼方式中指定 base64。使用的字符包括大小寫拉丁字母各 26 個(gè)、數(shù)字 10 個(gè)、加號(hào) + 和斜杠 /,共 64 個(gè)字符,等號(hào) = 用來(lái)作為后綴用途。
下面我們來(lái)介紹如何在 HTML 中嵌入 base64 編碼的圖片。在編寫 HTML 網(wǎng)頁(yè)時(shí),對(duì)于一些簡(jiǎn)單圖片,通常會(huì)選擇將圖片內(nèi)容直接內(nèi)嵌在網(wǎng)頁(yè)中,從而減少不必要的網(wǎng)絡(luò)請(qǐng)求,但是圖片數(shù)據(jù)是二進(jìn)制數(shù)據(jù),該怎么嵌入呢?絕大多數(shù)現(xiàn)代瀏覽器都支持一種名為 Data URLs
的特性,允許使用 base64 對(duì)圖片或其他文件的二進(jìn)制數(shù)據(jù)進(jìn)行編碼,將其作為文本字符串嵌入網(wǎng)頁(yè)中。
Data URLs 由四個(gè)部分組成:前綴(data:
)、指示數(shù)據(jù)類型的 MIME 類型、如果非文本則為可選的 base64
標(biāo)記、數(shù)據(jù)本身:
data:[<mediatype>][;base64],<data>
mediatype
是個(gè) MIME 類型的字符串,例如 “image/jpeg
” 表示 JPEG 圖像文件。如果被省略,則默認(rèn)值為 text/plain;charset=US-ASCII
。如果數(shù)據(jù)是文本類型,你可以直接將文本嵌入(根據(jù)文檔類型,使用合適的實(shí)體字符或轉(zhuǎn)義字符)。如果是二進(jìn)制數(shù)據(jù),你可以將數(shù)據(jù)進(jìn)行 base64 編碼之后再進(jìn)行嵌入。比如嵌入一張圖片:
<img alt="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">
但需要注意的是:如果圖片較大,圖片的色彩層次比較豐富,則不適合使用這種方式,因?yàn)樵搱D片經(jīng)過(guò) base64 編碼后的字符串非常大,會(huì)明顯增大 HTML 頁(yè)面的大小,從而影響加載速度。 除此之外,利用 FileReader API,我們也可以方便的實(shí)現(xiàn)圖片本地預(yù)覽功能,具體代碼如下:
<input type="file" accept="image/*" onchange="loadFile(event)"> <img id="output"/> <script> const loadFile = function(event) { const reader = new FileReader(); reader.onload = function(){ const output = document.querySelector('output'); output.src = reader.result; }; reader.readAsDataURL(event.target.files[0]); }; </script>
在以上示例中,我們?yōu)?file 類型輸入框綁定 onchange
事件處理函數(shù) loadFile
,在該函數(shù)中,我們創(chuàng)建了一個(gè) FileReader 對(duì)象并為該對(duì)象綁定 onload
相應(yīng)的事件處理函數(shù),然后調(diào)用 FileReader 對(duì)象的 readAsDataURL()
方法,把本地圖片對(duì)應(yīng)的 File 對(duì)象轉(zhuǎn)換為 Data URL。·
在完成本地圖片預(yù)覽之后,我們可以直接把圖片對(duì)應(yīng)的 Data URLs 數(shù)據(jù)提交到服務(wù)器。針對(duì)這種情形,服務(wù)端需要做一些相關(guān)處理,才能正常保存上傳的圖片,這里以 Express 為例,具體處理代碼如下:
const app = require('express')(); app.post('/upload', function(req, res){ let imgData = req.body.imgData; // 獲取POST請(qǐng)求中的base64圖片數(shù)據(jù) let base64Data = imgData.replace(/^data:image\/\w+;base64,/, ""); let dataBuffer = Buffer.from(base64Data, 'base64'); fs.writeFile("image.png", dataBuffer, function(err) { if(err){ res.send(err); }else{ res.send("圖片上傳成功!"); } }); });
對(duì)于 FileReader 對(duì)象來(lái)說(shuō),除了支持把 Blob/File 對(duì)象轉(zhuǎn)換為 Data URL 之外,它還提供了 readAsArrayBuffer()
和 readAsText()
方法,用于把 Blob/File 對(duì)象轉(zhuǎn)換為其它的數(shù)據(jù)格式。這里我們來(lái)看個(gè) readAsArrayBuffer()
的使用示例:
// 從 blob 獲取 arrayBuffer let fileReader = new FileReader(); fileReader.onload = function(event) { let arrayBuffer = fileReader.result; }; fileReader.readAsArrayBuffer(blob);
總結(jié)
到此這篇關(guān)于前端使用Blob下載文件的幾種方式的文章就介紹到這了,更多相關(guān)前端用Blob下載文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)拼音(字母)匹配漢字(姓名)的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)拼音(字母)匹配(搜索)漢字(姓名)的效果,文中的示例代碼講解詳細(xì),感興趣的可以了解一下2023-04-04el-date-picker組件隱藏時(shí)間組件底部清空按鈕的操作步驟
工作中可能會(huì)遇到el-date-picker組件隱藏時(shí)間組件底部清空按鈕,接下來(lái)通過(guò)本文給大家分享el-date-picker組件如何隱藏時(shí)間組件底部清空按鈕,需要的朋友可以參考下2024-06-06用javascript實(shí)現(xiàn)計(jì)算兩個(gè)日期的間隔天數(shù)
用javascript實(shí)現(xiàn)計(jì)算兩個(gè)日期的間隔天數(shù)...2007-08-08JS數(shù)組索引檢測(cè)中的數(shù)據(jù)類型問(wèn)題詳解
這篇文章主要給大家介紹了關(guān)于JS數(shù)組索引檢測(cè)中的數(shù)據(jù)類型問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01asp.net中System.Timers.Timer的使用方法
asp.net中System.Timers.Timer的使用方法,需要的朋友可以參考一下2013-03-03