如何将JavaScript数组信息导出到csv（在客户端）？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将JavaScript数组信息导出到csv（在客户端）？相关的知识，希望对你有一定的参考价值。
我知道有很多这方面的问题，但我需要使用javascript来做到这一点。我正在使用Dojo 1.8并在数组中包含所有属性信息，如下所示：
[["name1", "city_name1", ...]["name2", "city_name2", ...]]
知道如何将其导出到客户端的CSV吗？
您可以在本机JavaScript中执行此操作。您必须将数据解析为正确的CSV格式（假设您正在使用数组数组，如问题中所述）：
const rows = [
["name1", "city1", "some other info"],
["name2", "city2", "more info"]
];
let csvContent = "data:text/csv;charset=utf-8,";
rows.forEach(function(rowArray) {
let row = rowArray.join(",");
csvContent += row + "
";
});
或更短的方式（使用arrow functions）：
const rows = [
["name1", "city1", "some other info"],
["name2", "city2", "more info"]
];
let csvContent = "data:text/csv;charset=utf-8,"
+ rows.map(e => e.join(",")).join("
");
然后你可以使用JavaScript的window.open和encodeURI函数来下载CSV文件，如下所示：
var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
Edit:
If you want to give your file a specific name, you have to do things a little differently since this is not supported accessing a data URI using thewindow.open method. In order to achieve this, you can create a hidden <a> DOM node and set its download attribute as follows:
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");
document.body.appendChild(link); // Required for FF
link.click(); // This will download the data file named "my_data.csv".
使用csv数据.ie var blob = new Blob([data], type:"text/csv");创建一个blob
如果浏览器支持保存blob，即if window.navigator.mSaveOrOpenBlob)===true，则使用以下命令保存csv数据：window.navigator.msSaveBlob(blob, 'filename.csv')
如果浏览器不支持保存和打开blob，则将csv数据保存为：
var downloadLink = document.createElement('<a></a>');
downloadLink.attr('href', window.URL.createObjectURL(blob));
downloadLink.attr('download', filename);
downloadLink.attr('target', '_blank');
document.body.append(downloadLink);
完整代码片段：
var filename = 'data_'+(new Date()).getTime()+'.csv';
var charset = "utf-8";
var blob = new Blob([data], {
type: "text/csv;charset="+ charset + ";"
});
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
} else {
var downloadLink = document.element('<a></a>');
downloadLink.attr('href', window.URL.createObjectURL(blob));
downloadLink.attr('download', filename);
downloadLink.attr('target', '_blank');
document.body.append(downloadLink);
downloadLink[0].click();
}
这里有很多自己动手的解决方案，用于将数据转换为CSV，但几乎所有这些解决方案都会在数据类型方面有各种注意事项，它们可以正确地格式化，而不会绊倒Excel等。
为什么不使用经证实的东西：Papa Parse
Papa.unparse(data[, config])
然后将其与本地下载解决方案之一结合起来，例如。 @ArneHB的那个看起来不错。
这里有两个问题：
- 如何将数组转换为csv字符串
- 如何将该字符串保存到文件中
第一个问题的所有答案（Milimetric除外）在这里看起来像是一种矫枉过正。 Milimetric的那个不包括altrenative要求，例如带引号的周围字符串或转换对象数组。
以下是我对此的看法：
对于一个简单的csv，一个map（）和一个join（）就足够了：
var test_array = [["name1", 2, 3], ["name2", 4, 5], ["name3", 6, 7], ["name4", 8, 9], ["name5", 10, 11]];
var csv = test_array.map(function(d){
return d.join();
}).join('
');
/* Results in
name1,2,3
name2,4,5
name3,6,7
name4,8,9
name5,10,11
此方法还允许您在内部联接中指定除逗号之外的列分隔符。例如一个标签：d.join(' ')
另一方面，如果你想正确地做并将字符串括在引号“”中，那么你可以使用一些JSON魔法：
var csv = test_array.map(function(d){
return JSON.stringify(d);
})
.join('
')
.replace(/(^[)|(]$)/mg, ''); // remove opening [ and closing ]
// brackets from each line
/* would produce
"name1",2,3
"name2",4,5
"name3",6,7
"name4",8,9
"name5",10,11
如果你有像这样的对象数组：
var data = [
{"title": "Book title 1", "author": "Name1 Surname1"},
{"title": "Book title 2", "author": "Name2 Surname2"},
{"title": "Book title 3", "author": "Name3 Surname3"},
{"title": "Book title 4", "author": "Name4 Surname4"}
];
// use
var csv = data.map(function(d){
return JSON.stringify(Object.values(d));
})
.join('
')
.replace(/(^[)|(]$)/mg, '');
One arrow function with ES6 :
const dataToCsvURI = (data) => encodeURI(
`data:text/csv;charset=utf-8,${data.map((row, index) => row.join(',')).join(`
`)}`
);
然后 ：
window.open(
dataToCsvURI(
[["name1", "city_name1"/*, ...*/], ["name2", "city_name2"/*, ...*/]]
)
);
如果有人为reactjs需要这个，react-csv就是为此而存在的
您可以使用下面的代码将数组导出到使用Javascript的CSV文件。
这也处理特殊字符部分
var arrayContent = [["Séjour 1, é,í,ú,ü,ű"],["Séjour 2, é,í,ú,ü,ű"]];
var csvContent = arrayContent.join("
");
var link = window.document.createElement("a");
link.setAttribute("href", "data:text/csv;charset=utf-8,%EF%BB%BF" + encodeURI(csvContent));
link.setAttribute("download", "upload_data.csv");
link.click();
Here是工作jsfiddle的链接
人们正在尝试创建自己的csv字符串，这些字符串在边缘情况下会失败，例如特殊字符等，这肯定是一个解决的问题吧？
papaparse - 用于JSON到CSV编码。 Papa.unparse()。
import Papa from "papaparse";
const downloadCSV = (args) => {
let filename = args.filename || 'export.csv';
let columns = args.columns || null;
let csv = Papa.unparse({ data: args.data, fields: columns})
if (csv == null) return;
var blob = new Blob([csv]);
if (window.navigator.msSaveOrOpenBlob) // IE hack; see http://msdn.microsoft.com/en-us/library/ie/hh779016.aspx
window.navigator.msSaveBlob(blob, args.filename);
else
{
var a = window.document.createElement("a");
a.href = window.URL.createObjectURL(blob, {type: "text/plain"});
a.download = filename;
document.body.appendChild(a);
a.click(); // IE: "Access is denied"; see: https://connect.microsoft.com/IE/feedback/details/797361/ie-10-treats-blob-url-as-cross-origin-and-denies-access
document.body.removeChild(a);
}
}
用法示例
downloadCSV({
filename: 'filename.csv',
data: [{'a': '1', 'b': 2'}],
columns: ['a','b']
});
https://github.com/mholt/PapaParse/issues/175 - 有关浏览器支持讨论，请参阅此评论。
以下是我在Java GWT应用程序中在客户端下载CSV文件的方法。特别感谢Xavier John的解决方案。它已经过验证可以在FF 24.6.0，IE 11.0.20和Chrome 45.0.2454.99（64位）中使用。我希望这能节省一些时间：
public class ExportFile
{
private static final String CRLF = "
";
public static void exportAsCsv(String filename, List<List<String>> data)
{
StringBuilder sb = new StringBuilder();
for(List<String> row : data)
{
for(int i=0; i<row.size(); i++)
{
if(i>0) sb.append(",");
sb.append(row.get(i));
}
sb.append(CRLF);
}
generateCsv(filename, sb.t以上是关于如何将JavaScript数组信息导出到csv（在客户端）？的主要内容，如果未能解决你的问题，请参考以下文章