「JavaScriptだけでファイルをダウンロードさせたい」
「ファイル作成・ダウンロードをクライアントだけで行いたい」
このような場合、この記事の内容が参考となります。
この記事では、JavaScriptだけによるファイル作成・ダウンロードの方法を解説しています。
本記事の内容
- サンプルコード【関数】
- Blobインターフェイス
- URLインターフェイス
それでは、上記に沿って解説していきます。
サンプルコード【関数】
まずは、関数を載せておきます。
この関数を使えば、JavaScriptだけでファイル作成・ダウンロードが実現できます。
function download_txt(file_name, data) {
const blob = new Blob([data], {type: 'text/plain'});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
document.body.appendChild(a);
a.download = file_name;
a.href = url;
a.click();
a.remove();
URL.revokeObjectURL(url);
}
使い方は、次のように記述するだけです。
download_txt("test.txt", "12345");
上記コードが処理されると、ファイルのダウンロードが始まります。
デモページを用意しました。
デモページ
https://self-development.info/sv/api/sample/file.html
上記デモページへアクセスすると、いきなりダウンロードが始まります。
ダウンロードされるファイルは、次のようなファイル名・内容となります。
test.txt
実際に、JavaScriptだけでファイル作成・ダウンロードができることを確認できました。
では、なぜこのようなことが実現可能なのでしょうか？
それを理解するためには、以下を知っておく必要があります。
- Blobインターフェイス
- URLインターフェイス
それぞれを以下で説明します。
Blobインターフェイス
Blobは、以下の箇所で出てきます。
const blob = new Blob([data], {type: 'text/plain'});
配列型のデータをMIMEタイプ指定でBlobオブジェクトに変換しています。
Blobオブジェクトは、バイナリデータという認識で問題ありません。
MIMEタイプは、以下のモノを比較的よく見かけます。
- application/octet-stream
- text/plain
- image/jpeg
- image/png
- image/gif
なお、CSVはtext/plainで指定可能です。
以上、Blobインターフェイスについて説明しました。
次は、URLインターフェイスを確認します。
URLインターフェイス
URLは、最初に以下の箇所で出てきます。
const url = URL.createObjectURL(blob);
上記コードでは、オブジェクトURLを生成しています。
指定できるオブジェクトは、以下。
- File
- Blob
- MediaSource
オブジェクトからオブジェクトURLを生成できるのは、わかりました。
では、オブジェクトURLとは具体的にどのようなモノなのでしょうか？
「12345」（Blobに変換）をオブジェクトURLにしたモノは、以下。
06835d92-9031-4fba-8639-acbda4bd16a1
しかし、これは一時的なモノです。
毎回、変わります。
オブジェクトURLは、メモリ上に保存したオブジェクトの住所と捉えればよいでしょう。
ここで、メモリという言葉が出てきました。
メモリに保存する以上は、それを放っておくことはできません。
公式におけるcreateObjectURLの説明には、以下の記述があります。
この機能はメモリリークを生み出す可能性があるため、サービスワーカー内で利用することはできません。
つまり、createObjectURLを利用する場合は、メモリに関して注意しないといけません。
メモリは、使ったら解放する必要があるのです。
メモリを解放しているのが、以下のコードとなります。
URL.revokeObjectURL(url);
以上、URLインターフェイスについて説明しました。
