javascript - vue导出csv - 前端生成csv




将javascript数据导出到CSV文件,无需与服务器交互 (3)

如果我们在一个nodeJS服务器上,我们可以编写一个头文件,设置一个MIME类型并发送它:

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

并且由于标题,浏览器将为指定的csv文件创建一个下载。

当在浏览器中生成有用的数据时,获取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);

@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');
}



看到adeneo的答案,但不要忘记encodeURIComponent

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

另外,我需要为行分隔符“\ r \ n”而不只是“\ n”。

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

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







export-to-csv