JS操作二進位制方法 - blob

Gkkids發表於2019-04-08
JS

主要總結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;
複製程式碼
  1. 通過外掛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');
}
複製程式碼
  1. 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);
  }
}
複製程式碼

相關文章