Как переименовать загруженные файлы из window.open() в javascript?

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 там не существует, которые поддерживаются в нескольких браузерах.

Одним из этих способов является новый атрибут загрузки для <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);