如何将ui-grid导出到excel文件?

Mic*_*ael 5 javascript angularjs angular-ui-grid ui-grid

我在带有angularjs的项目中使用ui-grid.

在我的项目中,ui-grid将内容导出到excel文件,并且它运行良好.

这是ui-grid声明:

这里是javascript中的ui-grid定义:

 $scope.gridOptions = {
    columnDefs: [
      { field: 'name' },
      { field: 'company', cellFilter: 'mapCompany:this.grid.appScope.companyCatalog' }
    ],
    enableGridMenu: true,
    enableSelectAll: true,
    exporterCsvFilename: 'myFile.csv',
    exporterPdfDefaultStyle: {fontSize: 9},
    exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
    exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
    exporterPdfHeader: { text: "My Header", style: 'headerStyle' },
    exporterPdfFooter: function ( currentPage, pageCount ) {
      return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
    },
    exporterPdfCustomFormatter: function ( docDefinition ) {
      docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
      docDefinition.styles.footerStyle = { fontSize: 10, bold: true }; 
      return docDefinition;
    },
    exporterPdfOrientation: 'portrait',
    exporterPdfPageSize: 'LETTER',
    exporterPdfMaxGridWidth: 500,
    exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),

    data : [      
      {
           "name": "Derek",
           "company": 423638
       },
      {
           "name": "Frederik",
           "company": 513560
       }                       
   ],
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
    },
    gridMenuCustomItems: [
        {
            title:'Custom Export',
            action: function ($event) {
              // this.grid.api.exporter.csvExport( uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true );

              var exportData = uiGridExporterService.getData(this.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);

              var csvContent = uiGridExporterService.formatAsCsv([], exportData, this.grid.options.exporterCsvColumnSeparator);

              uiGridExporterService.downloadFile (this.grid.options.exporterCsvFilename, csvContent, this.grid.options.exporterOlderExcelCompatibility);        
            },
            order:0
        } 
    ]  
  };
Run Code Online (Sandbox Code Playgroud)

这是PLUNKER的工作!

但我需要将内容导出到RTL excel文件.

我的问题是如何将ui-grid内容导出到RTL excel文件?

Jam*_*ard 7

你有两个选择.您可以使用内置菜单,我刚刚在UIGrid的演示中成功完成,或者您可以添加另一个模块,ui.grid.exporter

从文档:

此模块提供从网格导出数据的功能.可以以多种格式导出数据,并且可以导出所有数据,可见数据或选定行,包括所有列或可见列.没有提供UI,调用者应根据需要提供自己的UI /按钮,或启用gridMenu

我使用了内置的gridMenu,它下载了一个没有名为undefined的扩展名的文件.我能够从LibreOffice Calc打开它. 在此输入图像描述 在此输入图像描述 在此输入图像描述

如果您想要更多控制,具体取决于您的用例,请使用导出器功能.导出器功能允许以csv或pdf格式从网格导出数据.导出器可以导出所有数据,可见数据或选定数据.

如果要导出为Excel,则需要安装Excel-Builder模块,可通过以下方式获得:bower install excelbuilder.

你在问题中遗漏了很多.用户可以在excel中设置RTL或LTR选项,具体取决于版本.在代码中执行此操作将需要另一个库或程序.多年前,我使用Visual Basic进行了大量的MS Word和Excel编程.

我的观点是,您需要指定excel版本,是否要以编程方式修改文件,是将文件发送到某处还是用户下载它然后用excel打开它?等...我需要更多关于您的用例的细节.