使用Javascript - 下载CSV为文件

Question

我与一些JavaScript搞乱下载一些CSV文本：

<script> 
var data = '"Column One","Column Two","Column Three"'; 
window.location.href = 'data:text/csv;charset=UTF-8,' + encodeURIComponent(data); 
</script> 

到目前为止，这是工作，但随着浏览器提示我要保存文件，没有文件名也不扩展。

我该如何预先确定文件的名称以及它的扩展名，在window.location.href之内？

Answer 1

function downloadFile(fileName, urlData) { 

    var aLink = document.createElement('a'); 
    var evt = document.createEvent("HTMLEvents"); 
    evt.initEvent("click"); 
    aLink.download = fileName; 
    aLink.href = urlData; 
    aLink.dispatchEvent(evt); 
} 

var data = '"Column One","Column Two","Column Three"'; 
downloadFile('2.csv', 'data:text/csv;charset=UTF-8,' + encodeURIComponent(data)); 

http://jsfiddle.net/rooseve/7bUG8/

Answer 2

在我而言，事实证明，Excel中忽略的charset = UTF-8部分。我发现一个solution in this post，强制Excel考虑到UTF-8。因此，这最后一行并获得成功对我来说：

downloadFile('2.csv', 'data:text/csv;charset=UTF-8,' + '\uFEFF' + encodeURIComponent(data)); 

Answer 3

更新Andrew's Answer避免使用过时的功能。

来源：https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#The_old-fashioned_way

//Triggers a download of the given file 
//@see https://stackoverflow.com/questions/21177078/javascript-download-csv-as-file 
//@see https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#The_old-fashioned_way 
// 
//@param fileName {string} - Name of the file to download include file extension 
//@param urlData {string} - Encoded URI of the document data 
function downloadFile(fileName, urlData) { 

    var aLink = document.createElement('a'); 
    aLink.download = fileName; 
    aLink.href = urlData; 

    var event = new MouseEvent('click'); 
    aLink.dispatchEvent(event); 
} 

var data = '"Column One","Column Two","Column Three"'; 
downloadFile('2.csv', 'data:text/csv;charset=UTF-8,' + encodeURIComponent(data));