将 javascript 数据导出到 CSV 文件而不需要服务器交互

如果我们在一个 nodeJS 服务器上，我们可以写一个头，设置一个 mime 类型，然后发送它:

res.header("Content-Disposition", "attachment;filename="+name+".csv");
res.type("text/csv");
res.send(200, csvString);

由于头部的原因，浏览器会为指定的 csv 文件创建一个下载。

当有用的数据在浏览器中生成时，一个解决方案是使用 ajax，将数据上传到服务器(也许可以选择保存在那里) ，然后让服务器将数据和这些头一起发送回浏览器，成为一个 CSV 下载。

但是，我想要一个100% 的浏览器解决方案，不涉及乒乓球与服务器。

因此，我想到，可以打开一个新的窗口，并尝试设置与 META 标签等价的标题。

但是在最近的 Chrome 浏览器中，这并不适合我。

我得到了一个新窗口，它包含 csvString，但不作为下载。

我猜我希望在底部选项卡中下载，或者在一个空白的新窗口中在底部选项卡中下载。

我想知道 meta 标签是否正确，或者是否还需要其他标签。

有没有一种方法可以让这个工作而不用把它放到服务器上？

用于在浏览器中创建 CSV 的 JsFiddle (不是工作输出窗口，但没有下载)

var A = [['n','sqrt(n)']];  // initialize array of rows with header row as 1st item
for(var j=1;j<10;++j){ A.push([j, Math.sqrt(j)]) }
var csvRows = [];
for(var i=0,l=A.length; i<l; ++i){
csvRows.push(A[i].join(','));   // unquoted CSV row
}
var csvString = csvRows.join("\n");
console.log(csvString);
var csvWin = window.open("","","");
csvWin.document.write('<meta name="content-type" content="text/csv">');
csvWin.document.write('<meta name="content-disposition" content="attachment;  filename=data.csv">  ');
csvWin.document.write(csvString);
141681 次浏览
小开
最佳答案

总是有 HTML5 download属性:

如果存在此属性，则表明作者打算使用 用于下载资源的超链接，以便当用户 点击链接，他们会被提示将其保存为本地文件。

如果属性具有值，则该值将用作预填充的 时打开的保存提示符中的文件名 链接。

var A = [['n','sqrt(n)']];


for(var j=1; j<10; ++j){
A.push([j, Math.sqrt(j)]);
}


var csvRows = [];


for(var i=0, l=A.length; i<l; ++i){
csvRows.push(A[i].join(','));
}


var csvString = csvRows.join("%0A");
var a         = document.createElement('a');
a.href        = 'data:attachment/csv,' +  encodeURIComponent(csvString);
a.target      = '_blank';
a.download    = 'myFile.csv';


document.body.appendChild(a);
a.click();

小提琴

在 Chrome 和 Firefox 中测试，在最新版本的 (截至2013年7月)中运行良好。
也可以在 Opera 中使用，但不设置文件名 (截至2013年7月)。
似乎不能在 IE9(大吃一惊) (截至2013年7月)中工作。

关于哪些浏览器支持下载属性的概述可以在 这里中找到
对于不支持的浏览器，必须在服务器端设置适当的头。

显然有 针对 IE10和 IE11的黑客攻击，它不支持 download属性 (边缘做然而)。

var A = [['n','sqrt(n)']];


for(var j=1; j<10; ++j){
A.push([j, Math.sqrt(j)]);
}


var csvRows = [];


for(var i=0, l=A.length; i<l; ++i){
csvRows.push(A[i].join(','));
}


var csvString = csvRows.join("%0A");


if (window.navigator.msSaveOrOpenBlob) {
var blob = new Blob([csvString]);
window.navigator.msSaveOrOpenBlob(blob, 'myFile.csv');
} else {
var a         = document.createElement('a');
a.href        = 'data:attachment/csv,' +  encodeURIComponent(csvString);
a.target      = '_blank';
a.download    = 'myFile.csv';
document.body.appendChild(a);
a.click();
}
小开

看到腺嘌呤的答案，但不要忘记 encodeURIComponent！

a.href     = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvString);

另外，我需要对行分隔符执行“ r n”而不仅仅是“ n”。

var csvString = csvRows.join("\r\n");

修正小提琴: http://jsfiddle.net/7Q3c6/

小开

@ adeneo 对 Firefox 和 chrome 都有效... 对于 IE，可以使用下面的代码。

if (window.navigator.msSaveOrOpenBlob) {
var blob = new Blob([decodeURIComponent(encodeURI(result.data))], {
type: "text/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, 'FileName.csv');
}

小开

有一次我在一个很小的库中打包了 JS 代码:

Https://github.com/alexlibs/client-side-csv-generator

Github 提供了代码、文档和演示/游乐场。

享受:)

欢迎拉请求。

小开

我们可以使用 javascript 轻松地创建和导出/下载带有任何分隔符的 excel 文件(在这个答案中我使用逗号分隔符)。我没有使用任何外部包创建 Excel 文件。

    var Head = [[
'Heading 1',
'Heading 2',
'Heading 3',
'Heading 4'
]];


var row = [
{key1:1,key2:2, key3:3, key4:4},
{key1:2,key2:5, key3:6, key4:7},
{key1:3,key2:2, key3:3, key4:4},
{key1:4,key2:2, key3:3, key4:4},
{key1:5,key2:2, key3:3, key4:4}
];


for (var item = 0; item < row.length; ++item) {
Head.push([
row[item].key1,
row[item].key2,
row[item].key3,
row[item].key4
]);
}


var csvRows = [];
for (var cell = 0; cell < Head.length; ++cell) {
csvRows.push(Head[cell].join(','));
}
            

var csvString = csvRows.join("\n");
let csvFile = new Blob([csvString], { type: "text/csv" });
let downloadLink = document.createElement("a");
downloadLink.download = 'MYCSVFILE.csv';
downloadLink.href = window.URL.createObjectURL(csvFile);
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();

小开

参见 adeneo 的回答，但是为了在 Excel 中在所有国家都可以使用，您应该在文件的第一行添加“ SEP =”。这将在 Excel 中设置标准分隔符，并且不会显示在实际的文档中

var csvString = "SEP=, \n" + csvRows.join("\r\n");

提交答案