/***
*
Blob對象表示一個不可變,原始數據的類文件對象,如果要從其他非Blob對象和結構構建一個Blob,需要使用Blob()構造函數,
如果要獲取一個blob數據的子集blob需要使用Blob.slice()方法
1. 構造函數
Blob(blobParts[, options]) 返回一個新創建的 Blob 對象,其內容由參數中給定的數組串聯組成。
2. 屬性
Blob.size => Blob對象中所包含數據的大小(字節)
Blob.type => 一個字符串,表明該 Blob 對象所包含數據的 MIME 類型。如果類型未知,則該值爲空字符串。
3. 方法
Blob.slice([start[, end[, contentType]]]) => Blob.slice([start[, end[, contentType]]])
作用:
1. 可以獲取某個文件內容或後臺返回的文件(需要設置響應類型爲Blob),再通過createObjectURL方法,變成一個文件地址,實現本地文件預覽
2. 前端下載後臺返回的文件時,文件爲文件流或者二進制時,可以使用Blob方法,變成一個文件地址,然後進行下載功能(需要設置響應類型爲Blob)。
- 使用時第二個參數的文件類型要指定
FileReader
FileReader對象允許Web應用程序異步讀取存儲在計算機上文件的內容,使用file或Blob對象指定要讀取的文件或數據
1. 構造函數
new FileReader();
2. 屬性
FileReader.error 當一個文件讀取錯誤時
FileReader.readState
0 還沒有加載數據
1 正在加載數據
2 完成加載數據
FileReader.result 當文件完全讀取完成後
3. 事件
FileReader.onabort 在讀取時中斷的時候觸發
FileReader.error 在發生錯誤時
FileReader.onload 在讀取完成後
FileReader.onloadstart 在剛開始讀取的時候
FileReader.onloadend 在讀取結束時(要麼成功要麼失敗)
FileReader.onprogress 在讀取的過程中
4. 方法
FileReader.readAsDataUrl() 開始讀取指定Blob中的內容,一旦完成,result屬性中包含一個data:URL格式的Base64字符串來表示所讀取的文件內容
FileReader.readAsBinaryString() 開始讀取指定Blob中的內容,一旦完成,result屬性中將包含所讀取文件的原始二進制數據。
FileReader.readAsText() 開始讀取指定Blob中的內容,一旦完成,result屬性中將包含一個字符串來表示所讀文件的內容
FileReader.abort() 中止讀取操作,在返回時readState屬性爲2
FileReader.readAsArrayBuffer() 開始讀取指定的Blob文件,一旦完成,result屬性中保存的將是讀取文件的ArrayBuffer數據對象
作用:實現文件下載
*/
let debug = {
hello: "world"
};
let blob = new Blob([JSON.stringify(debug, null, 2)], {type: 'application/json'});
console.log(blob);
//var typedArray = GetTheTypedArraySomehow();
// let blob = new Blob([debug.hello], {type: 'application/octet-stream'}); // 傳入一個合適的 MIME 類型
// let url = URL.createObjectURL(blob);
// console.log(url)
/*Blob作用1【實現文件預覽(本地文件後臺返的文件)】*/
/**
// 本地
const blob = new Blob([file.file], {type: 'application/pdf'});
this.signFileUrl = URL.createObjectURL(blob); // 將生成的地址賦值給src的屬性
// 後臺請求ajax 需要設置響應類型爲Blob,{responseType: "blob"}
*/
/*Blob作用2【ajax後下載({responseType: "blob"})】*/
function downloadFile() {
const blob = new Blob([result]);
const fileName = '文件名稱.xlsx';
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 釋放URL 對象
document.body.removeChild(elink);
}
/*FileReader【實現下載({responseType: "blob"})】*/
xhr.onload = function (result) {
if (this.status === 200) {
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob); // 轉換爲base64,可以直接放入a表情href
reader.onload = function (e) {
// 轉換完成,創建一個a標籤用於下載
var a = document.createElement('a');
a.download = templateName + '.xlsx';//xls
console.log(e);
a.href = e.target.result;
$("body").append(a);
a.click(); // 修復firefox中無法觸發click
$(a).remove();
}
}
};
/*根據後臺返回的文件地址,進行下載文件,有時候在瀏覽器上本想下載卻成了文件預覽*/
function downloadPdf() {
let request = new XMLHttpRequest();
request.responseType = 'blob';
request.open('GET', this.signFileUrl);
request.onload = function() {
let url = window.URL.createObjectURL(this.response);
let a = document.createElement('a');
document.body.appendChild(a);
a.href = url;
a.download = '簽名文件.pdf';
a.click();
}
request.send();
}
if (result) {
const blob = new Blob([content]);
const fileName = '文件名稱';
if ('download' in document.createElement('a')) {
// 非IE下載
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 釋放URL 對象
document.body.removeChild(elink);
} else {
// IE10+下載
navigator.msSaveBlob(blob, fileName);
}
} else {
that.$message.error(result.data.message);
}