extjs4.1 - ExtJS 我们如何将网格数据导出到 Excel / PDF

Question

我目前正在使用 ExtJs 4.1.1 版本。

我已经检查了所有可能的方法来找出导出到 Excel 功能，但我没有找到确切的解决方案。

您能否建议，是否有任何规定可以使用 ExtJs 将网格数据导出到 Excel、PDF 中？如果是，请将正确的 URL 传递给我，以便我可以更改代码。

Answer 1

你可以试试这个导出器插件。 https://github.com/iwiznia/Ext.ux.Exporter

还有其他方法是使用服务器端组件来呈现 CSV 或 xls 输出。这可能会给您更好的控制，但您必须手动编码所有部分。如果您使用的是 Java，那么您可以使用 POI 库来创建您的 Excel 工作簿等。

Answer 2

我试过这个：

将 SDK2 网格导出为 CSV

代码是：

Ext.define("GridExporter", {
dateFormat : 'Y-m-d g:i',

exportGrid: function(grid) {
    if (Ext.isIE) {
        this._ieToExcel(grid);

    } else {
        var data = this._getCSV(grid);

        window.location = 'data:text/csv;charset=utf8,' + encodeURIComponent(data);
    }
},

_escapeForCSV: function(string) {
    if (string.match(/,/)) {
        if (!string.match(/"/)) {
            string = '"' + string + '"';
        } else {
            string = string.replace(/,/g, ''); // comma's and quotes-- sorry, just loose the commas
        }
    }
    return string;
},

_getFieldText: function(fieldData) {
    var text;

    if (fieldData == null || fieldData == undefined) {
        text = '';

    } else if (fieldData._refObjectName && !fieldData.getMonth) {
        text = fieldData._refObjectName;

    } else if (fieldData instanceof Date) {
        text = Ext.Date.format(fieldData, this.dateFormat);

    } else if (!fieldData.match) { // not a string or object we recognize...bank it out
        text = '';

    } else {
        text = fieldData;
    }

    return text;
},

_getFieldTextAndEscape: function(fieldData) {
    var string  = this._getFieldText(fieldData);

    return this._escapeForCSV(string);
},

_getCSV: function (grid) {
    var cols    = grid.columns;
    var store   = grid.store;
    var data    = '';

    var that = this;
    Ext.Array.each(cols, function(col, index) {
        if (col.hidden != true) {
            data += that._getFieldTextAndEscape(col.text) + ',';
        }
    });
    data += "\n";

    store.each(function(record) {
        var entry       = record.getData();
        Ext.Array.each(cols, function(col, index) {
            if (col.hidden != true) {
                var fieldName   = col.dataIndex;
                var text        = entry[fieldName];

                data += that._getFieldTextAndEscape(text) + ',';
            }
        });
        data += "\n";
    });

    return data;
},

_ieGetGridData : function(grid, sheet) {
    var that            = this;
    var resourceItems   = grid.store.data.items;
    var cols            = grid.columns;

    Ext.Array.each(cols, function(col, colIndex) {
        if (col.hidden != true) {
            console.log('header: ', col.text);
            sheet.cells(1,colIndex + 1).value = col.text;
        }
    });

    var rowIndex = 2;
    grid.store.each(function(record) {
        var entry   = record.getData();

        Ext.Array.each(cols, function(col, colIndex) {
            if (col.hidden != true) {
                var fieldName   = col.dataIndex;
                var text        = entry[fieldName];
                var value       = that._getFieldText(text);

                sheet.cells(rowIndex, colIndex+1).value = value;
            }
        });
        rowIndex++;
    });
},

_ieToExcel: function (grid) {
    if (window.ActiveXObject){
        var  xlApp, xlBook;
        try {
            xlApp = new ActiveXObject("Excel.Application"); 
            xlBook = xlApp.Workbooks.Add();
        } catch (e) {
            Ext.Msg.alert('Error', 'For the export to work in IE, you have to enable a security setting called "Initialize and script ActiveX control not marked as safe" from Internet Options -> Security -> Custom level..."');
            return;
        }

        xlBook.worksheets("Sheet1").activate;
        var XlSheet = xlBook.activeSheet;
        xlApp.visible = true; 

       this._ieGetGridData(grid, XlSheet);
       XlSheet.columns.autofit; 
    }
}});

它在 4.2.1 下也能完美运行

Answer 3

我现在无法为您提供代码，但我会这样做： 1. 使用您在网格存储中的值构建一个简单的隐藏 html 表。2. 找到合适的客户端导出脚本（使用 XML 和 Javascript） 3. 将隐藏表的 ID 传递给将通过 XML 构建您的 excel 文件的函数。

希望这可以帮助。