フロントエンドはBlobオブジェクトを利用して指定ファイルを作成し、ダウンロードします.

一、Blobオブジェクト
Blobオブジェクトは可変ではなく、元のデータのクラスのファイルオブジェクトを表します.Blobは必ずしもJavaScript元のフォーマットのデータを表していません.Fileインターフェースは、Blobに基づいて、blobの機能を継承し、ユーザシステム上のファイルをサポートするように拡張する.
構造関数

var aBlob = new Blob( array, options );

arrayは、ArayBuffer(バイナリデータバッファ)、ArayBufferView(バイナリデータバッファのarray-likeビュー)、Blob、DOMStringなどのオブジェクトからなるAray、または他の類似のオブジェクトの混合体であり、Blobに入れる.DOMStringsはUTF-8として符号化される.

optionsはオプションで、次の2つの属性を指定することができます.

typeは、デフォルト値は「」であり、blobに入れられる配列内容のMIMEタイプを表しています.

endingsでは、デフォルト値は「tranparent」で、行の終端を含む文字列がどのように書き込まれるかを指定します.これは次の2つの値のうちの1つです.「native」は、代表行の終了符が、ホストオペレーティングシステムのファイルシステムに適合する改行符に変更されます.または「transparent」は、blobに保存されている終端符がそのまま維持されます.

例

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
  {type : 'application/json'});

二、URLオブジェクト
URLオブジェクトを作成してファイルのダウンロードリンクを指定します.
構造関数
新しいURLを作成して指定されたFileオブジェクトまたはBlobオブジェクトを表します.

objectURL = window.URL.createObjectURL(blob);

window.URL.revokeObject URL()
createObject URL()を呼び出すたびに、同じオブジェクトをパラメータとして作成した場合でも、新しいURLオブジェクトが作成されます.これらのURLオブジェクトが必要でない場合、各オブジェクトはURL.revokeObject URL()を呼び出すことによってリリースされなければならない.ブラウザはドキュメントが終了した時に自動的にリリースしますが、最適な性能とメモリの使用状況を得るためには、安全なタイミングでそれらを自発的に解放してください.

window.URL.revokeObjectURL(objectURL);

三、タグを使ってダウンロードする.タグを生成します.

const link = document.createElement('a');

href属性指定ダウンロードリンク

link.href = window.URL.createObjectURL(blob);

dowload属性指定ファイル名
ダウンロード属性はダウンロードされたハイパーリンクのターゲットを規定しています.タグにはhref属性が設定されている必要があります.この属性は、ダウンロードファイルの名前を規定する値を設定することもできる.許可された値に制限はありません.ブラウザは正しいファイルの拡張子を自動的に検出してファイルに追加します.

link.download = fileName;

click()イベントトリガダウンロード

link.click();

四、フォーマット変換
MIMEタイプはtext/playinを使用して、txtファイルのフォーマットで符号化してdoc(docx)ファイル(doc(docx)ファイルをダウンロードします.毎回開くと、適切なコードを選択する必要があります.解決策はまだ見つけられません.補足を歓迎します.

const foo = {hello: "world"};
const blob = new Blob([JSON.stringify(foo)], {type: "text/plain"});
const fileName = `${new Date().valueOf()}.doc`;
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
window.URL.revokeObjectURL(link.href);

注:指定された拡張子のファイルをダウンロードするには、MIME参照マニュアルに照らしてtypeを設定すればいいです.
転載先:https://juejin.im/post/5b078f22f265da0dcd0b5ee3