JavaScriptでFileの作成が手軽にできるようになりました。
ユーザのローカルに任意でDownLoadして貰いたい場合
APIから取ってきたデータをローカルに貯めたい場合
とにかくサーバーにファイル貯めたくない場合
できると嬉しいから、とりあえず手っ取り早くおしえてくれよ！
という意見にお答えします！
JavaScriptってファイル生成できるの？
結論：ブラウザによります。
FileAPIとBlobに対応していれば、生成できます。
IE11（多分10も動作するはず）、Firefox70.0、
Chorome78.0、Edge44では動作しました。
仕様書とか書いている人には申し訳ない。
どういう仕組みでJavaScriptでファイル生成できるの？
感覚を掴んで貰いたいので箇条書きしますね。
- ※BlobURLをJavaScriptで生成する
- 生成したBlobURLを、aタグのhref属性に設定する
- ダウンロード属性付けたaタグをクリックする
- ファイルのダウンロードができる
※BlobURLはダウンロードさせたいデータです
これで感覚は掴めましたでしょうか。
それでは、JavaScriptでファイル作成を行う肝の部分を一緒に勉強していきましょう。
JavaScriptでファイル作成を行う際の肝
せっかくですし、一緒にお勉強しましょう。
コードはよ！って人は画面下部へスクロールしていってください。
Blobを定義する
BlobとはJSのクラスです。
定義しておけば、データの取り扱いが簡単になります。
Blobで定義できるデータをまとめます。
- ファイル … 画像とか
- バイナリ … 生データ
（画像の大きさ変更とかデータの加工とかする時に利用する） - 文字列 … 二文字以上の文字
- html … HyperTextMarkupLanguage
Blobとして定義できるのはこれだけです。
それでは表現方法を見て行きましょう。
var imageData = new Blob([file], { type: "image/png" });
var binaryData = new Blob([binary], { type: "application/octet-binary" });
var stringData = new Blob(["文字列"], { type: "text/plain" });
var htmlData = new Blob(["<html>"], { type: "text/plain;charset=UTF-8" });BlobURLを生成する
作成したBlobをBlobURL作成する関数の引数に設定します。
BlobURLが生成され、これをデータとしてダウンロードすることができます。
BlobURLの作成は、URL.createObjectURLという関数で行います。
BlobURLをAタグのhref属性にセットすることで、ダウンロードが可能です。
ここまで分かると、コードが書きたくなってきたのではないでしょうか。
次からコードを書いて行きます。
JavaScriptでファイル作成する為のソースコード
この記事の目標は
「最初の方で挙げたブラウザでファイルのダウンロードができるプログラムをJSで作る」です。
その為に行わなければならないことは
- Blobの定義をすること
- BlobURLの生成をすること
- AタグのhrefへBlobURLを付与すること
たったの３つなので、コードも簡単です。
IE向け：msSaveOrOpenBlobでファイルを保存する方法
Internet Explorerなど古いブラウザでは、Blobを直接ダウンロードできないため、 msSaveOrOpenBlob を使ってファイルを保存する必要があります。この記事では、その方法も含めて紹介しています。
<html>
<haed>
<meta charset="UTF-8" />
</haed>
<script>
function downloadText() {
// 変更し易いようにパラメータは変数で定義してます。
// 定数使わない理由はIEで調子崩すような気がして怖いからです。
var string = 'ダウンロードできたかな？';
var title = 'testfile.txt';
var blobType = 'text/plain';
var linkTagId = 'getLocal';
var linkTag = document.getElementById(linkTagId);
var linkTagAttr = ['href','download'];
var msSave = window.navigator;
var stringObject = new Blob([string], { type: blobType });
var objectURL = window.URL.createObjectURL(stringObject);
var UA = window.navigator.userAgent.toLowerCase();
// UAで判定しなくても、window.navigator.msSaveBlobでの判定も可能
// ただ、Edgeまで対象になるので、こうしてます。
// msSave使いたいのは、IEだけです。
if(UA.indexOf('msie') != -1 || UA.indexOf('trident') != -1) {
// IEの時はmsSaveOrOpenBlobかmsSaveBlobを利用します。
window.navigator.msSaveOrOpenBlob(stringObject, title);
} else {
linkTag.setAttribute(linkTagAttr[0],objectURL);
linkTag.setAttribute(linkTagAttr[1],title);
}
};
</script>
<body>
<a id="getLocal" href="#" onClick="downloadText()">ダウンロードしてね</a>
</body>
</html>なんとなくレガシーな感じがしますが、各ブラウザで動作します。
ダウンロードしてねをクリックするとダウンロードが開始されますよ。
以上です。JavaScriptは進化していきますね…。
注: この記事は古いため、変数定義がvarですが、現代的にはletまたはconstで変数を定義するのが一般的です。
コメントを残す