Hightlight.js-9.15.6

2019年3月23日 星期六

[Web] 利用FileSaver.js使瀏覽器彈出存檔視窗儲存前端資料

在撰寫前端程式(ex:Single Pag Application)時,有時需要使用者儲存使用者端產生的資料,這時候可以使用FileSaver.js,任何轉換成Web API中的Blob物件的資料都能夠使用FileSaver.js存檔,因此在使用FileSaver.js之前至少要了解什麼是Blob物件、以及Blob建構式。



Blob物件

在MDN上關於Blob(Binary Large Object)的描述是"類檔案的不可變原始資料物件"(a file-like object of immutable, raw data),而File介面就是繼承Blob,並增強瀏覽器使用者系統上檔案的操作功能,要實現儲存前端資料這個功能可以先了解Blob建構式。...但值得謹記在心的是目前為止Android上主流瀏覽器對Blob的支援不明朗


Blob建構式

// Blob物件建構式語法:
let Blob = new Blob(array [, options]);

array是建構式必要的參數,是ArrayBuffer、ArrayBufferView、Blob、DOMString組成的Array物件或多種型別混合的陣列。

options作為一個物件傳入建構式,可以有兩種key:type跟endings:

type是對Blob型別描述(例如:text/csv、image/jpeg...),沒有預設值(type: ""),選項可以參考MDN上的MIME type

endings則可以指定對行尾\n的處理方式預設選項是"transparent"會保留\n為換行符號,如果指定為"native"就會將\n轉換為各OS定義的換行符號。

延伸學習

Blob Properties、Blob Methods、File API



FileSaver.js範例:

這裡的範例都是參考官方網站上改成cdn引入的,而測試的時候儲存遠端URL資源似乎無法使用?另外官網也提供用Web API 的 File產生Blob物件再套入saveAs(),這部分可以自行延伸。

儲存文字

<script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>
<script>
  let blob = new Blob(["Hello, FileSaver.js!"], {type: "text/plain;charset=utf-8"});
  saveAs(blob, "hello.txt");
</script>

儲存convas

原理是Canvas元素用HTMLCanvasElement.toBlob()轉換成Blob,再存檔。
<script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>
<script>
  let canvas = document.getElementById("canvasId");
  canvas.toBlob(blob =>
    saveAs(blob, "pretty image.png");
  );
</script>