ブラウザ側はJSでファイルの作成とダウンロードを行う

ブラウザ側はJSでファイルの作成とダウンロードを行う
1需要
フロントエンドは、取得したデータ生成ファイルをユーザにダウンロードさせる必要があり、従来のaタグhrefの目的ファイルを生成するには、すでに生成されたファイルサーバパスが必要であるだけでなく、多くのブラウザサポートタイプのファイルがデフォルトでロードされ、ユーザに選択パスのダウンロードを提示しない
2ソリューション
2.1ダウンロード代替ロード:H 5ラベル属性HTML5のaのラベルにはdownloadの属性が追加されており、リンクをクリックするとブラウザはリンク先のファイルを開くのではなく、ダウンロードに変更されます(現在はchrome、firefox、operaのみサポートされています).ダウンロード時にはリンクの名前を直接ファイル名として使用します(downloadにファイル名を付けて変更できます.例えば:download=“file.js”)
2.2生成ファイル:DataURI
jsでコンテンツ生成ファイルをピクチャDataURIに倣うことができる

<img src=”data:image/gif;base64,R0lGOXXXXX">

ダウンロード方法にカプセル化

function downloadFile(aLink, fileName, content){
    aLink.download = fileName;
    aLink.href = "data:text/plain," + content;
}

downloadFileを呼び出した後、ユーザーはリンクをクリックしてブラウザのダウンロードをトリガーする
3改善案
条件をさらに緩和する

ダウンロードタイプ制限を解除

クリックプロセスをキャンセルし、

を直接ダウンロードします.
ファイルタイプの問題を解決するには、ブラウザの新しいAPI(URL.createObjectURL)で解決することができ、URL.createObjectURLは通常、DataURIの画像を作成するために使用され、ここではファイルをダウンロードするために使用され、パラメータはFileオブジェクト(input[type=file]で選択したファイル)またはBlob対象(バイナリオブジェクト)であり、ブラウザに自動的にファイルタイプを設定させる
タイプ制限の解決:contentでObjectURLを作成し、aLinkに値を割り当てると、ファイルタイプの制限を解決できます.
ファイルの自動ダウンロード:UIを構築してイベントをクリックし、自動的にトリガーします.

function downloadFile(fileName, content){
    var aLink = document.createElement('a');
    var blob = new Blob([content]);
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", false, false);//initEvent         FF    
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(evt);
}

呼び出しdownloadFile、ファイル自動ダウンロード