JS操做二進制方法 - blob

主要總結Blob對象屬性及做用，經過DEMO介紹Blob對象的應用場景。

js能夠經過blob方法直接操做二進制數據。

Blob 對象表示一個不可變、原始數據的類文件對象。Blob 表示的不必定是JavaScript原生格式的數據。File 接口基於Blob，繼承了 blob 的功能並將其擴展使其支持用戶系統上的文件。

建立Blob

var blob = new Blob( dataArr:Array, opt:{type:string})

• dataArray: 數組，包含了要添加到 Blob 對象中的數據，數據能夠是任意多個 ArrayBuffer, ArrayBufferView, Blob, 或者 DOMString 對象。
• opt：對象，用於設置Blob的屬性（如： MIME 類型）

1.建立一個DOMString對象的Blob對象

var a="<p>l</p>"
var b = new Blob([a],{type:"text/plain"})
複製代碼

2.建立一個裝滿ArrayBuffer對象的Blob對象

var a=new ArrayBuffer(16)
var b = new Blob([a],{ type:"text/plain"})
複製代碼

3.建立一個裝滿ArrayBufferView對象的Blob對象

var a=new ArrayBuffer(16)
var b = new Int16Array(a)
複製代碼

經過url下載文件

1. 經過createObjectURL

//axios須要添加responseType：'blob'
let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
let url = window.URL.createObjectURL(blob);
window.location.href = url;
複製代碼

2. 經過插件file-saver

//axios須要添加responseType：'blob'
var blob = new Blob([res.data], {type: "text/plain;charset=utf-8"});
saveAs(blob, "file.txt");
複製代碼

createDownload("download.txt","download file");

function createDownload(fileName, content){
    var blob = new Blob([content]);
    var link = document.createElement("a");
    link.innerHTML = fileName;
    link.download = fileName;
    link.href = URL.createObjectURL(blob);
    document.getElementsByTagName("body")[0].appendChild(link);
}
複製代碼

從 Blob 中提取數據

1. readAsText()

readAsText 方法能夠將 Blob 或者 File 對象轉根據特殊的編碼格式轉化爲內容(字符串形式)

這個方法是異步的，也就是說，只有當執行完成後纔可以查看到結果，若是直接查看是無結果的，並返回undefined

也就是說必需要掛載 實例下的 onload 或 onloadend 的方法處理轉化後的結果

當轉化完成後， readyState 這個參數就會轉換 爲 done 即完成態， event("loadend") 掛載的事件會被觸發，並能夠經過事件返回的形參獲得中的 FileReader.result 屬性獲得轉化後的結果

// 一個文件上傳的回調 <input type="file" onchange="onChange(event)">
function onChange(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function(event) {
    // 文件裏的文本會在這裏被打印出來
    console.log(event.target.result)
  };

  reader.readAsText(file,'UTF-8');
}
複製代碼

2. readAsDataURL()

readAsDataURL 方法會讀取指定的 Blob 或 File 對象。讀取操做完成的時候，readyState會變成已完成DONE，並觸發 loadend 事件，同時 result 屬性將包含一個data:URL格式的字符串（base64編碼）以表示所讀取文件的內容。

//<input type="file" onchange="previewFile()"><br>
//<img src="" height="200" alt="Image preview...">

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}
複製代碼