jsはファイルを使ってcsvファイルをダウンロードすることを実現します.

1.Blobオブジェクトを理解する
Blobオブジェクトが現れる前に、javascriptの中でずっと比較的に良い方式でバイナリファイルを処理していません.Blobがあってから、私達はそれを使ってバイナリデータを操作することができます.Bolbオブジェクトおよびそのファイルストリームのアプリケーションシーンのダウンロードを理解するために開始します.
1.Blobオブジェクトの作成方法は以下の通りです.

var blob = new Blob(dataArray, options);

dataAray:Blobオブジェクトに追加するデータを含む配列です.配列は、バイナリオブジェクトまたは文字列とすることができます.
optionsは、配列中のデータのMIMEタイプを設定するためのオプションのオブジェクトパラメータです.
1.DOMStringオブジェクトのBlobオブジェクトを作成します.次のコード:

var str = "
Hello World
"; 
var blob = new Blob([str], {type: 'text/xml'}); 
console.log(blob); //   ：Blob {size: 22, type: "text/xml"}

2.URL.reate Object URLの対象を理解する
windowオブジェクトのURLオブジェクトは、blobまたはfileをurlとして読み出すために使用されます.
window.URL.reate Object URL(file/blob);
例えば、上のblobオブジェクトを組み合わせて一つのurlを生成するシンプルなdemoの列は以下の通りです.

var str = "
Hello World
"; 
var blob = new Blob([str], {type: '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'});
console.log(blob); 

const url3 = window.URL.createObjectURL(blob);
console.log(url3);

上記のコードの最初の印刷blob変数の値は以下の通りです.

Blob {size: 22, type: ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"}

2番目のurl 3を印刷する変数の値情報は以下の通りです.

blob:null/2c75a56e-0104-4572-bc19-391d3bf93d9d

3.HTML 5のaタグのdownload属性を理解する
HTMl 5の中でaタグにdownload属性を追加しました.この属性値を設定すると、このリンクをクリックした時にブラウザは新しいリンクを開けず、直接ファイルをダウンロードします.ファイル名はdownloadの属性値です.
したがって、この特徴に合わせて、簡単にファイルをダウンロードできるようになりました.まず、元のコードに基づいて、aリンクを動的に作成し、aタグのスタイルをnoneに設定します.このリンクのhref属性は私たちの上にwindow.URL.c.reate Object URLがあります.生成されたurlは、aリンクのdownload属性を設定します.この属性値は私たちのダウンロードファイルのファイル名です.最後にクリック機能を起動したらダウンロードできます.次のコード:

var str = "
Hello World
"; 
var blob = new Blob([str], {type: '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'});
console.log(blob);
const url3 = window.URL.createObjectURL(blob);
console.log(url3);

var filename = '     ' + '.csv';
const link = document.createElement('a');
link.style.display = 'none';
link.href = url3;
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();