如何将 JavaScript 数组信息导出到 csv(在客户端)?

新手上路,请多包涵

我知道有很多这种性质的问题,但我需要使用 JavaScript 来做到这一点。我正在使用 Dojo 1.8 并在数组中包含所有属性信息,如下所示:

[["name1", "city_name1", ...]["name2", "city_name2", ...]]

知道如何在客户端将其导出为 CSV 吗?

原文由 Sam007 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 943
2 个回答

您可以在本机 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 + "\r\n";
 });

或更短的方式(使用 箭头函数):

 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("\n");

然后您可以使用 JavaScript 的 window.openencodeURI 函数来下载 CSV 文件,如下所示:

 var encodedUri = encodeURI(csvContent);
 window.open(encodedUri);

编辑:

如果你想给你的文件一个特定的名字,你必须做一些不同的事情,因为不支持使用 window.open 方法访问数据 URI。为了实现这一点,您可以创建一个隐藏的 <a> DOM 节点并设置其 download 属性,如下所示:

 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".

原文由 Default 发布,翻译遵循 CC BY-SA 4.0 许可协议

基于上面的答案,我创建了这个函数,我已经在 IE 11、Chrome 36 和 Firefox 29 上测试过

function exportToCsv(filename, rows) {
    var processRow = function (row) {
        var finalVal = '';
        for (var j = 0; j < row.length; j++) {
            var innerValue = row[j] === null ? '' : row[j].toString();
            if (row[j] instanceof Date) {
                innerValue = row[j].toLocaleString();
            };
            var result = innerValue.replace(/"/g, '""');
            if (result.search(/("|,|\n)/g) >= 0)
                result = '"' + result + '"';
            if (j > 0)
                finalVal += ',';
            finalVal += result;
        }
        return finalVal + '\n';
    };

    var csvFile = '';
    for (var i = 0; i < rows.length; i++) {
        csvFile += processRow(rows[i]);
    }

    var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, filename);
    } else {
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", filename);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}

例如: https ://jsfiddle.net/jossef/m3rrLzk0/

原文由 Xavier John 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题