HandsOnTable 导出文件

HandsOnTable exportFile

我按照 this 示例将我的热点下载到 excel 文件中。

问题是它做不到:

var exportPlugin = hot.getPlugin('exportFile');

returns未定义。不用说如果我 console.log "hot" 它就是我期望的对象。

handsontable的版本是最新的(1.7.3)。

我的 table 中是否有任何选项会阻止我加载插件?

我使用以下选项创建了热点:

data: sourceData,
colHeaders: colHeaders,
rowHeaders: false,
nestedRows: false,
contextMenu: false,
formulas: true,
comments: true,
columns: columnsProperties,
cell: cellsProperties,
fixedColumnsLeft: categoryColumn+1,
manualColumnFreeze: true,

正如您想象的那样,sourceData、colHeaders、columnsProperties 和 cellsProperties 是在别处定义的。

我可以正确地想象 table。

谢谢

SN

我自己的项目有一个功能,可以将 table 下载为 CSV 文件,您可以直接使用 excel 阅读,当然也可以根据需要转换为 XLSX 格式。

参见我的示例 JSFiddle

以下是将您的 JSON 对象转换为 csv 文件并下载它的通用函数(对于 IE 和 chrome/Firefox 等):

function JSONToCSVConvertor(JSONData, colHeaders) {
    var 
    arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData,
    CSV = '',   
    row = "",
    fileName = "handsontable.csv";

    // Put the header (based on the colHeaders of my table in my example)
    for (var index in colHeaders) {
        row += colHeaders[index] + ';';
    }
    row = row.slice(0, -1);
    CSV += row + '\r\n';

    // Adding each rows of the table
    for (var i = 0; i < arrData.length; i++) {
        var row = "";
        for (var index in arrData[i]) {
            row += arrData[i][index] + ';';
        }
        row = row.slice(0, -1);
        CSV += row + '\r\n';
    }

    if (CSV == '') {
        alert("Invalid data");
        return;
    }        

    // Downloading the new generated csv.
    // For IE >= 9
    if(window.navigator.msSaveOrOpenBlob) {
        var fileData = [CSV];
        blobObject = new Blob(fileData);
        window.navigator.msSaveOrOpenBlob(blobObject, fileName);
    } else { 
    // For Chome/Firefox/Opera
        var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

        var link = document.createElement("a");    
        link.href = uri;

        link.style = "visibility:hidden";
        link.download = fileName;

        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
}

您可以将它与按钮一起使用,例如:

Handsontable.Dom.addEvent(save, 'click', function() {
    JSONToCSVConvertor(hot.getData(), hot.getSettings().colHeaders);
});

请注意,我使用了约 10k 行的 table,它的效果非常好。