前端使用Blob下載文件的幾種方式
在前端下載文件是個很通用的需求，一般后端會提供下載的方式有兩種：
1.直接返回文件的網(wǎng)絡地址（一般用在靜態(tài)文件上，比如圖片以及各種音視頻資源等）
2.返回文件流（一般用在動態(tài)文件上，比如根據(jù)前端選擇，導出不同的統(tǒng)計結果 excel 等）
第一種方式比較簡單，但是使用場景有限。
第二種方式通用性更好
我們先一下第一種的使用場景：
- a鏈接
<a rel="external nofollow" rel="external nofollow" >下載文件</a>
我們可以通過download屬性，可以實現(xià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>
億點小知識：在使用window.open的時候在除Google Chrome 瀏覽器會攔截內(nèi)容但在其他瀏覽器是可以直接下載的
- 如果要想Google Chrome 設置里面更改
第二種 使用blob文件流下載
<script>
function Download() {
axios({
url: "www.baidu.pdf",
method: 'GET',
responseType: 'blob', // 這里就是轉化為blob文件流，指定響應類型為二進制數(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>
下面封裝了一個 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() // 點擊下載
document.body.removeChild(downloadElement) // 下載完成移除元素
window.URL.revokeObjectURL(href) // 釋放掉blob對象
}
// download(blobStream,{ 'Content-Type': 'application/vnd.ms-excel;charset=utf-8' })
三、Blob
1、Blob 是什么
Blob（Binary Large Object）表示二進制類型的大對象。在數(shù)據(jù)庫管理系統(tǒng)中，將二進制數(shù)據(jù)存儲為一個單一個體的集合。Blob 通常是影像、聲音或多媒體文件。在 JavaScript 中 Blob 類型的對象表示不可變的類似文件對象的原始數(shù)據(jù)。 為了更直觀的感受 Blob 對象，我們先來使用 Blob 構造函數(shù)，創(chuàng)建一個 myBlob 對象，具體如下圖所示：
如你所見，myBlob 對象含有兩個屬性：size 和 type。其中 size 屬性用于表示數(shù)據(jù)的大?。ㄒ宰止?jié)為單位），type 是 MIME 類型的字符串。Blob 表示的不一定是 JavaScript 原生格式的數(shù)據(jù)。比如 File 接口基于 Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統(tǒng)上的文件。·
2、Blob API 簡介
Blob 由一個可選的字符串 type（通常是 MIME 類型）和 blobParts 組成：
MIME（Multipurpose Internet Mail Extensions）多用途互聯(lián)網(wǎng)郵件擴展類型，是設定某種擴展名的文件用一種應用程序來打開的方式類型，當該擴展名文件被訪問的時候，瀏覽器會自動使用指定應用程序來打開。多用于指定一些客戶端自定義的文件名，以及一些媒體文件打開方式。·
常見的 MIME 類型有：超文本標記語言文本 .html text/html、PNG圖像 .png image/png、普通文本 .txt text/plain 等。
2.1 構造函數(shù)
Blob 構造函數(shù)的語法為：
var aBlob = new Blob(blobParts, options);
相關的參數(shù)說明如下：·
- blobParts：它是一個由 ArrayBuffer，ArrayBufferView，Blob，DOMString 等對象構成的數(shù)組。DOMStrings 會被編碼為 UTF-8。
- options：一個可選的對象，包含以下兩個屬性：
- type —— 默認值為
""，它代表了將會被放入到 blob 中的數(shù)組內(nèi)容的 MIME 類型。 - endings —— 默認值為
"transparent"，用于指定包含行結束符\n的字符串如何被寫入。它是以下兩個值中的一個："native"，代表行結束符會被更改為適合宿主操作系統(tǒng)文件系統(tǒng)的換行符，或者"transparent"，代表會保持 blob 中保存的結束符不變。
- type —— 默認值為
示例一：從字符串創(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]); // 二進制格式的 "hello"
let blob = new Blob([hello, ' ', 'semlinker'], {type: 'text/plain'});介紹完 Blob 構造函數(shù)，接下來我們來分別介紹 Blob 類的屬性和方法：
2.2 屬性
前面我們已經(jīng)知道 Blob 對象包含兩個屬性：·
- size（只讀）：表示
Blob對象中所包含數(shù)據(jù)的大?。ㄒ宰止?jié)為單位）。 - type（只讀）：一個字符串，表明該
Blob對象所包含數(shù)據(jù)的 MIME 類型。如果類型未知，則該值為空字符串。
2.3 方法
- slice([start[, end[, contentType]]])：返回一個新的 Blob 對象，包含了源 Blob 對象中指定范圍內(nèi)的數(shù)據(jù)。
- stream()：返回一個能讀取 blob 內(nèi)容的
ReadableStream。 - text()：返回一個 Promise 對象且包含 blob 所有內(nèi)容的 UTF-8 格式的
USVString。 - arrayBuffer()：返回一個 Promise 對象且包含 blob 所有內(nèi)容的二進制格式的
ArrayBuffer。
這里我們需要注意的是，Blob 對象是不可改變的。我們不能直接在一個 Blob 中更改數(shù)據(jù)，但是我們可以對一個 Blob 進行分割，從其中創(chuàng)建新的 Blob 對象，將它們混合到一個新的 Blob 中。這種行為類似于 JavaScript 字符串：我們無法更改字符串中的字符，但可以創(chuàng)建新的更正后的字符串。
3、Blob 使用場景
3.1 分片上傳
File 對象是特殊類型的 Blob，且可以用在任意的 Blob 類型的上下文中。所以針對大文件傳輸?shù)膱鼍?，我們可以使?slice 方法對大文件進行切割，然后分片進行上傳，具體示例如下：
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ù)存儲到 Blob 對象中，比如：
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)
}當然除了使用 XMLHttpRequest API 之外，我們也可以使用 fetch API 來實現(xiàn)以流的方式獲取二進制數(shù)據(jù)。這里我們來看一下如何使用 fetch API 獲取線上圖片并本地顯示，具體實現(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;
});當 fetch 請求成功的時候，我們調用 response 對象的 blob() 方法，從 response 對象中讀取一個 Blob 對象，然后使用 createObjectURL() 方法創(chuàng)建一個 objectURL，然后把它賦值給 img 元素的 src 屬性從而顯示這張圖片。·
3.3 blob轉file
let obj = {
age: 18,
sex: '男'
}
let content = JSON.stringify(obj)
// blob類型
let blob = new Blob([content], {
type: 'application/json'
})
// 將blob轉成url
let url = URL.createObjectURL(blob) //blob:null/244bec7f-e3d3-43d5-803e-f98cc5c8117f =>鏈接里面的數(shù)據(jù)就是右邊的內(nèi)容 {"age":18,"sex":"男"}
console.log(url)
//blob轉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> 或其他標簽的 URL，多虧了 type 屬性，我們也可以上傳/下載 Blob 對象。下面我們將舉一個 Blob 文件下載的示例，不過在看具體示例前我們得簡單介紹一下 Blob URL。
1.Blob URL/Object URL
Blob URL/Object URL 是一種偽協(xié)議，允許 Blob 和 File 對象用作圖像，下載二進制數(shù)據(jù)鏈接等的 URL 源。在瀏覽器中，我們使用 URL.createObjectURL 方法來創(chuàng)建 Blob URL，該方法接收一個 Blob 對象，并為其創(chuàng)建一個唯一的 URL，其形式為 blob:<origin>/<uuid>，對應的示例如下：
blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f641
瀏覽器內(nèi)部為每個通過 URL.createObjectURL 生成的 URL 存儲了一個 URL → Blob 映射。因此，此類 URL 較短，但可以訪問 Blob。生成的 URL 僅在當前文檔打開的狀態(tài)下才有效。它允許引用 <img>、<a> 中的 Blob，但如果你訪問的 Blob URL 不再存在，則會從瀏覽器中收到 404 錯誤。·
上述的 Blob URL 看似很不錯，但實際上它也有副作用。雖然存儲了 URL → Blob 的映射，但 Blob 本身仍駐留在內(nèi)存中，瀏覽器無法釋放它。映射在文檔卸載時自動清除，因此 Blob 對象隨后被釋放。
但是，如果應用程序壽命很長，那不會很快發(fā)生。因此，如果我們創(chuàng)建一個 Blob URL，即使不再需要該 Blob，它也會存在內(nèi)存中。
針對這個問題，我們可以調用 URL.revokeObjectURL(url) 方法，從內(nèi)部映射中刪除引用，從而允許刪除 Blob（如果沒有其他引用），并釋放內(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);
});在示例中，我們通過調用 Blob 的構造函數(shù)來創(chuàng)建類型為 “text/plain” 的 Blob 對象，然后通過動態(tài)創(chuàng)建 a 標簽來實現(xiàn)文件的下載。·
3.5 Blob 轉換為 Base64
URL.createObjectURL 的一個替代方法是，將 Blob 轉換為 base64 編碼的字符串。Base64 是一種基于 64 個可打印字符來表示二進制數(shù)據(jù)的表示方法，它常用于在處理文本數(shù)據(jù)的場合，表示、傳輸、存儲一些二進制數(shù)據(jù)，包括 MIME 的電子郵件及 XML 的一些復雜數(shù)據(jù)。
在 MIME 格式的電子郵件中，base64 可以用來將二進制的字節(jié)序列數(shù)據(jù)編碼成 ASCII 字符序列構成的文本。使用時，在傳輸編碼方式中指定 base64。使用的字符包括大小寫拉丁字母各 26 個、數(shù)字 10 個、加號 + 和斜杠 /，共 64 個字符，等號 = 用來作為后綴用途。
下面我們來介紹如何在 HTML 中嵌入 base64 編碼的圖片。在編寫 HTML 網(wǎng)頁時，對于一些簡單圖片，通常會選擇將圖片內(nèi)容直接內(nèi)嵌在網(wǎng)頁中，從而減少不必要的網(wǎng)絡請求，但是圖片數(shù)據(jù)是二進制數(shù)據(jù)，該怎么嵌入呢？絕大多數(shù)現(xiàn)代瀏覽器都支持一種名為 Data URLs 的特性，允許使用 base64 對圖片或其他文件的二進制數(shù)據(jù)進行編碼，將其作為文本字符串嵌入網(wǎng)頁中。
Data URLs 由四個部分組成：前綴（data:）、指示數(shù)據(jù)類型的 MIME 類型、如果非文本則為可選的 base64 標記、數(shù)據(jù)本身：
data:[<mediatype>][;base64],<data>
mediatype 是個 MIME 類型的字符串，例如 “image/jpeg” 表示 JPEG 圖像文件。如果被省略，則默認值為 text/plain;charset=US-ASCII。如果數(shù)據(jù)是文本類型，你可以直接將文本嵌入（根據(jù)文檔類型，使用合適的實體字符或轉義字符）。如果是二進制數(shù)據(jù)，你可以將數(shù)據(jù)進行 base64 編碼之后再進行嵌入。比如嵌入一張圖片：
<img alt="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">
但需要注意的是：如果圖片較大，圖片的色彩層次比較豐富，則不適合使用這種方式，因為該圖片經(jīng)過 base64 編碼后的字符串非常大，會明顯增大 HTML 頁面的大小，從而影響加載速度。 除此之外，利用 FileReader API，我們也可以方便的實現(xiàn)圖片本地預覽功能，具體代碼如下：
<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)建了一個 FileReader 對象并為該對象綁定 onload 相應的事件處理函數(shù)，然后調用 FileReader 對象的 readAsDataURL() 方法，把本地圖片對應的 File 對象轉換為 Data URL。·
在完成本地圖片預覽之后，我們可以直接把圖片對應的 Data URLs 數(shù)據(jù)提交到服務器。針對這種情形，服務端需要做一些相關處理，才能正常保存上傳的圖片，這里以 Express 為例，具體處理代碼如下：
const app = require('express')();
app.post('/upload', function(req, res){
let imgData = req.body.imgData; // 獲取POST請求中的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("圖片上傳成功！");
}
});
});對于 FileReader 對象來說，除了支持把 Blob/File 對象轉換為 Data URL 之外，它還提供了 readAsArrayBuffer() 和 readAsText() 方法，用于把 Blob/File 對象轉換為其它的數(shù)據(jù)格式。這里我們來看個 readAsArrayBuffer() 的使用示例：
// 從 blob 獲取 arrayBuffer
let fileReader = new FileReader();
fileReader.onload = function(event) {
let arrayBuffer = fileReader.result;
};
fileReader.readAsArrayBuffer(blob);總結
到此這篇關于前端使用Blob下載文件的幾種方式的文章就介紹到這了,更多相關前端用Blob下載文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
識別操作系統(tǒng)是不是vista的js代碼...2007-08-08
在Web前端開發(fā)中，需要將數(shù)據(jù)動態(tài)渲染到頁面上，隨著應用程序的復雜度增加，數(shù)據(jù)渲染的邏輯也變得越來越復雜，這時候就需要使用模板引擎來幫助我們動態(tài)生成HTML標記，本文將深入介紹 JavaScript 模板引擎，幫助讀者更好地理解和應用模板引擎2023-06-06
javascript 構建一個xmlhttp對象池合理創(chuàng)建和使用xmlhttp對象
在我的這篇舊文里曾經(jīng)發(fā)布了一個簡單的ajax操作類。我們發(fā)現(xiàn)，在舊文里創(chuàng)建xmlhttp對象的時候，每次都要new一個對象。而我們都知道new一個對象的開銷是很大的。2010-01-01
Javascript取整函數(shù)及向零取整幾種常用的方法
這篇文章主要介紹了Javascript取整函數(shù)及向零取整幾種常用的方法,每種方法都有其特點和適用場景,推薦使用Math.trunc(),因為它語義明確、代碼易讀且性能較好,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了微信小程序列表中item左滑刪除功能，本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
大家在使用Dreamweaver中的時間線功能或以做出很有趣的動畫效果，Dreamweaver會自動為用戶生成特定的程序代碼，大家有沒有想過動畫的實現(xiàn)原理呢？2013-07-07
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
首先我們看看觀察者的概念 觀察者模式：定義對象間的一種一對多的依賴關系,當一個對象的狀態(tài)發(fā)生改變時, 所有依賴于它的對象都得到通知并被自動更新。2009-10-10
javascript在IE下trim函數(shù)無法使用的解決方法
這篇文章主要介紹了javascript在IE下trim函數(shù)無法使用的解決方法,分別敘述了javascript以及jQuery下的解決方案,對于WEB前端javascript設計人員進行瀏覽器兼容性調試有不錯的借鑒價值,需要的朋友可以參考下2014-09-09
這篇文章主要為大家詳細介紹了原生JS生成指定位數(shù)的驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10