[フロントエンド]JS実装ファイルダウンロード


Blob(Binary Large Object)オブジェクトは、一連の操作インタフェースを提供するバイナリデータを表しています.他のバイナリデータを操作するAPI(Fileオブジェクトなど)は、Blobオブジェクトに基づいて構築され、その属性と方法を継承しています.
Blobオブジェクトを生成するには、Blobコンストラクション関数を使用する方法と、既存のBlobオブジェクトに対してsliceメソッドを使用して一部を切り取る方法の2つがあります.
(1)Blobコンストラクション関数で、2つのパラメータを受け入れます.1番目のパラメータは実際のデータを含む配列で、2番目のパラメータはデータのタイプで、この2つのパラメータは必要ありません.
var htmlParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"];

var myBlob = new Blob(htmlParts, { "type" : "text\/xml" });

以下に、Blobオブジェクトを用いてダウンロード可能なファイルを生成する例を示す.
var blob = new Blob(["Hello World"]);

var a = document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = "hello-world.txt";
a.textContent = "Download Hello World!";

body.appendChild(a);

上のコードはスーパーリンクを生成し、クリックするとテキストファイルhello-worldのダウンロードを促す.txt、ファイル内容は「Hello World」です.