javascriptのwindow.open（）からダウンロードしたファイルの名前を変更する方法は？

Question

私は最近、ファンシープラグインなしでthis JSFiddle about how to convert a table to Excelファイルを直接見つけました。それは本当に私の必要性に合っていますが、欠陥があり、ファイルの名前を変更できません。 Chromeはファイルの名前をdownloadに変更し、Firefoxはランダムな名前を付けます。

$("#btnExport").click(function (e) { 
    window.title = "filename.xls"; // this part doesn't work 
    window.open('data:application/vnd.ms-excel,' +  
    $('#dvData').html()); 
    e.preventDefault(); 
}); 

ダウンロードしたファイルの名前を変更するにはどうすればよいですか？

Answer 1

使用<a>download属性を持つ要素

let file = new Blob([$('#dvData').html()], {type:"application/vnd.ms-excel"}); 

let url = URL.createObjectURL(file); 

let a = $("<a />", { 
    href: url, 
    download: "filename.xlsx" 
}) 
.appendTo("body") 
.get(0) 
.click(); 

jsfiddle https://jsfiddle.net/jWAJ7/4549/

Answer 2

ファイル名は、HTTPヘッダを提案することができますが、データのURIまたはwindow.openで同じことを達成する標準的なメカニズムがありません。

生成されたデータをダウンロードするときにファイル名を指定する方法はいくつかありますが、AFAIKには複数のブラウザでサポートされているものはありません。

これらの方法の1つは、<a>要素の新しいダウンロード属性です。

ダウンロードFoo この属性は、ファイルがダウンロードされるべきであることを示し（該当する場合は表示されずに）、ダウンロードされるファイルに使用するファイル名を指定します。

window.open()の代わりに、ダウンロード属性で表示されないリンクを生成し、.click()とすることができます。

var str = "Name, Price\nApple, 2\nOrange, 3"; 
var uri = 'data:text/csv;charset=utf-8,' + str; 

var downloadLink = document.createElement("a"); 
downloadLink.href = uri; 
downloadLink.download = "data.csv"; 

document.body.appendChild(downloadLink); 
downloadLink.click(); 
document.body.removeChild(downloadLink);