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에는 여러 브라우저에서 지원되는 파일이 없습니다.

이러한 방법 중 하나는 <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);