ブラウザからファイル出力（FileSaver.js）

yizm

6年前

HTMLのテーブルで擬似Excel作ろうとしてましたが、やっぱりファイルとしての入出力ほしいよなーって思ってたら、世の中いろんなものがあるもんですねー。

とっても関心しました。

FileSaver.jsっていうのを使うとブラウザ上の生成データをそのままファイル保存できるという。

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

こんな感じでFileSaver.jsを読み込んで、っと。

ふむふむ。FileSaver.jsが読み込まれるとsaveAsっていう関数がロードと。

んじゃ、使う前にsaveAsがロードされているかチェックする様にしとくといいかもね。

if (typeof(saveAs) == "function") { /* saveAs使う処理 */ }

んで、saveAsはBlobでデータ流しこんでファイル名指定するだけなんだって。

こんな感じでサンプル乗ってたよ。

  $("#export_test").click(function (){
    var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
    saveAs(blob, 'test.txt');
  });

ここに書いてある内容をテキストとして保存できます。
Hello World!!

うぉぉぅ、マジか、これサーバURLで落としてるんじゃないんだぜ。
マジなんでもできんなー。

そのままだとUTF-8のテキストになってしまうけど、SJISでテキスト作りたいよーって時は、encoding-japaneseが便利です。

参照を追加したら。

<script src="encoding.js"></script>

こんな感じにするとBLOBをSJISにエンコーディングできます。

// convert SJIS...
function encodhing_toSJIS(str) {
    const unicodeList = [];
    for (let i = 0; i < str.length; i += 1) {
        unicodeList.push(str.charCodeAt(i));
    }
    const shiftJisCodeList = Encoding.convert(unicodeList, 'sjis', 'unicode');
    return new Uint8Array(shiftJisCodeList);
}

※ 追記 2019/07/28

FileSaverと組み合わせ出来る便利なライブラリ『jszip.js』の記事も書きました。

良かったら立ち寄ってみてね。

jszipでzipファイル生成して保存

HTMLのTableをExcelに出力するJavaScript

こちらのサンプルコードを参考にさせて頂き、今ExcelっぽいHTMLテーブルに組み込みしてます。

次はxlsx.full.min.jsの方を観察してみますね。