Question

我使用http://handsontable.com/作为显示项目价格的小部件之一，我无法在其API或常见问题解答中找到CSV功能的导出和导入。有没有人实施或了解它？

Answer 1

是的，该评论将您链接到有关如何执行此操作的说明，而here是我为任何想要重用代码的人实现的。除了基本的CSV导出之外，还有一些增强功能，例如空格和特殊字符的转义，以及撇号。它还会设置列标题（如果它们存在），因此如果您没有列标题，请删除该行。

相关代码假设您有一个id = export-csv的按钮：

function parseRow(infoArray, index, csvContent) {
    var sizeData = _.size(hot1.getData());
    if (index < sizeData - 1) {
        dataString = "";
        _.each(infoArray, function(col, i) {
            dataString += _.contains(col, ",") ? "\"" + col + "\"" : col;
            dataString += i < _.size(infoArray) - 1 ? "," : "";
        })

        csvContent += index < sizeData - 2 ? dataString + "\n" : dataString;
    }
    return csvContent;
}

/**
 * Export to CSV button
 */
var exportCsv = $("#export-csv")[0];
if (exportCsv) {
    Handsontable.Dom.addEvent(exportCsv, "mouseup", function(e) {
        exportCsv.blur(); // jquery ui hackfix
        var csvContent = "data:text/csv;charset=utf-8,";
        csvContent = parseRow(colHeaders, 0, csvContent);  // comment this out to remove column headers
        _.each(hot1.getData(), function(infoArray, index) {
            csvContent = parseRow(infoArray, index, csvContent);
        });
        var encodedUri = encodeURI(csvContent);
        var link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", $("h1").text() + ".csv");
        link.click();
    })
}

希望它有所帮助！

从CSV导入HandsOnTable并从HandsOnTable导出为CSV

1 个答案: