Blobを使って（jQueryを使わずに）JavaScriptでデータをファイルに保存

6587 ワード
JavaScript blob JavaScript テキストリンク

はじめに

JavaScript使ってBLEペリフェラルからのセンサーデータを受信して保存する環境を作ろうとしてるとこ。
BLEとの通信はできるようになったので、ファイルに保存する方法を調べた。
jQueryのことわからないので、JavaScriptだけでやる方法調べた。
ブラウザ上に表示されるボタンを押したらデータをテキストで保存できるようになった。
データが増えるたびに書き出す方法はよくわからない。

環境

  • ChromeOS: 65.0.3325.184（Official Build） （64 ビット）

事前調査

Blob

調べると、Blobオブジェクトを使った事例がでてくる。
どうやらこれを使えばいいらしい。

Blob - Web API インターフェイス | MDN

jQuery + Blob

検索では、jQuery使った方法が多い。
試したら動いたし、雰囲気わかるけど、修正するには勉強が必要そうなので、めんどくさい。

Webページ作成覚書: javascript：ファイルの出力

他にも調べてたら、jQuery使わない方法があった。ありがたや。

JavaScriptだけでファイルの保存機能を実装する - 新人Webエンジニアの記録。

したこと

HTML

ボタンをおくだけ。

write.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Blob</title>
</head>
<body>
<button id="download" class="button">download</button>
<script src="write.js"></script>
</body>
</html>

JavaScript

Blobのオブジェクトを作って、<a>タグでリンクしてダウンロードできるようにする。
addEventListenerでボタンを押したらダウンロードできるようにする。

write.js
download = function (data){
  var blob = new Blob(data, {type: "text/plain"});
  var a = document.createElement("a");
  a.href = URL.createObjectURL(blob);
  a.target = '_blank';
  a.download = 'hoge.txt';
  a.click();
}

document.getElementById('download').addEventListener('click', function() {
  var dat = [[1, 2, 3, '\n'], [1, 1, 1, '\n']];
  download(dat);
});

結果

ブラウザでみたところ。

出力されるファイル

その他

ファイルに追記する方法が見つからなかった。
新しくファイル作らなあかんかもやけど、とりあえずはデータを追加してblobオブジェクト作り直したら良さそう。
Javascript. Append to blob - Stack Overflow

おわりに

そこそこやりたいことできてよかった。
ただ、普段MATLABとかpythonとかCとか使ってるので、ファイルに保存するだけなのに…とめんどくさく感じた。
Webの技術だとセキュリティとか色々考えると仕方ないんかな？
ローカルで使いたいだけだから、JavaScriptじゃなくて他のでやれよって話なのかも。