ExtJS我們如何將導出的網格數據導出到Excel/PDF

Question

我目前使用的是ExtJs 4.1.1版本。

我檢查了所有可能的方式來找出導出到Excel功能，但我沒有找到確切的解決方案。

您可以請建議，是否有任何規定將網格數據導出到Excel，使用ExtJs PDF？ 如果是，請將正確的URL傳遞給我，以便我可以更改我的代碼。

Answer 1

我現在無法爲您提供代碼，但這裏是我所做的： 1.使用網格商店中的值構建一個簡單的隱藏html表格。 2.找到一個合適的客戶端導出腳本（使用XML和Javascript） 3.將隱藏表的ID傳遞給將通過XML構建您的excel文件的函數。

希望這會有所幫助。

Answer 2

你可以試試這個出口商插件。 https://github.com/iwiznia/Ext.ux.Exporter

還有一種方法是使用服務器端組件呈現CSV或xls輸出。這可能會給你更好的控制，但你必須手動編寫所有的代碼。如果您使用的是Java，那麼你可以使用POI庫創建Excel工作簿等

Answer 3

我嘗試這樣做：

Exporting SDK2 Grid to 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