理解ブロブは何ですか

塊が何であるかの神秘が少しあります.
BLOBは"B B OB "か"Binaryラージオブジェクト"です.それはファイルのようです.
それはdefined にFile API JS仕様の.それは

一連の不変のバイト

サイズ

MIMEタイプ、例えば'image/jpeg' , 'text/plain' , 'text/csv' , 'application/pdf' , or 'application/json' ( some more examples )

例えば、データベースから、あるいはprotobuf , イメージファイルのバイトダンプであるバイト配列を得ることができますmy-awesome-file.jpg .
JavaScriptの決定的なガイドで.第7のエド、P . 522、それはファイルが実際にユーザーのローカルハードディスクに保存されるかもしれないと言われています、そして、JavaScriptはまだBlobにアクセスすることができます.
例を見ることができます.
https://jsfiddle.net/KennethLum/9L51my3b/

const arr = [
  // ...
];

const arrUint8 = new Uint8Array(arr);

const blob = new Blob([arrUint8], {
  type: 'image/jpeg',
});

const url = URL.createObjectURL(blob);

document.querySelector('#my-image').src = url;

arr は通常のJavaScript配列で、その内容は上に記載されていませんが、Jsfiddleの例にあります.
最初に“typed array”に変換されます.これはCプログラムが書き込まれたときの低レベルメモリブロックと同様の配列です.考えるmalloc ).
その後、“blob”に変換され、ファイルであるかのようになります.では、どのようにこのファイルにアクセスできますか?つの方法は、それのためのURLを得ることです

url = URL.createObjectURL(blob);

用です.URLは次のようになります

blob:https://fiddle.jshell.net/6631b3ce-ba72-41f1-bfb0-e498862a573d

このURLはファイルのアドレスです.
上の例では、イメージ要素のsrc そのURLをポイントし、画像を見ることができます.

ファイルを自動的にダウンロードする
もう一つのトリックが自動的にユーザーがこのファイルをダウンロードできるようにする<a> タグ.私たちはhref とdownload タグの属性を指定し、JavaScriptを使用してクリックします.

const imgElement = document.querySelector('#my-image');
const anchorElement = document.querySelector("#the-link");
imgElement.src = url;
anchorElement.href = url;
anchorElement.download = "my-awesome-image.jpg";

imgElement.addEventListener("load", () => {
  anchorElement.click();
});

例:https://jsfiddle.net/KennethLum/t89xguf6/
そして、ファイルを自動的にユーザーのためにダウンロードすることができます.若干のイメージが作られるとき(これはBLOBまたはキャンバスとして)、そして、それはダウンロードとしてユーザーに提供されます.たとえば、私たちは、発送ラベル、またはそれにユーザー名を持つ割引クーポンを作ることができるか、それは.csv ファイルのストックの歴史的なデータを使用して、画像として、またはPDFとしてユーザーに提供するか.csv ファイル.
実際には<a> 要素はページに存在する必要さえありません.これは動的に作成できます:
例:https://jsfiddle.net/KennethLum/gx6zu9ap/

imgElement.addEventListener('load', () => {
  const anchorElement = document.createElement('a');
  anchorElement.href = url;
  anchorElement.download = 'my-awesome-image.jpg';

  anchorElement.click();
});