ダウンロード属性とdataUrl hrefを持つ<a>タグの異なる動作？

Question

downloadタグの属性をタグで使用しようとすると、さまざまなブラウザで奇妙な動作が発生しています（hrefがdataUrlの場合）。

コードスニペット：

<a href="data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,UEsDBAoA...Qwwe=" download="testfile.xlsx" ></a> 
<a href="data:image/png;base64,iVBORw...ElFTkSuQmCC" download="testfile.png"></a> 

コンソール出力/挙動：

タグの

var a = document.createElement('a'); 
a.href = [generated dataUrl]; 
a.download = filename; 
console.log(a.outerHTML); 
a.click(); 

サンプルコンテンツはを生成し（上記にconsole.logラインから）

• Chrome：ファイルは期待通りにダウンロードされ、pngとxlsの両方が使用可能です。
• FireFox：何も起こりません。コンソール警告/エラーは表示されません。

• EDGE：

  • コンソールメッセージ：ナビゲーションが発生しました。データ：image/png; base64、iVBORw ...

  • コンソール警告： DOCTYPEが必要です。有効なHTML5のdoctypeを追加することを検討してください： ""

• IE11：コンソール：何もありません。現在のウィンドウで「data：image/png; base64、iVBORw ...」URLを開こうとします。

generated dataUrlは二重チェックされており、Chromeの動作によっても表示されます。

私は<a href="data:[mime][;base64],[encoded data] ></a>" download="filename.ext"が現在かなり標準的なものだと思いました。

質問：

のJavaScript生成されたファイルのダウンロードを呼び出すためのより良い（すなわち、クロスブラウザの互換性）方法はありますか？

Answer 1

一部のブラウザでは、html5ダウンロード属性はサポートされていません。あなたは

if(typeof link.download !== 'undefined'){ 
    //use <a> download 
} 
else{ 
    blob = toBlob(imageURIData); 
    saveAs(blob, name);//use filesaver.js 
}