Question

我正在ui-grid中使用angularjs在我的网站上创建表格。我可以将表格数据导出到excel，而无需使用样式，不会出现任何问题。我还找到了一个代码，该代码可以导出带有某些自定义样式的数据（只需合并单元格 B1 和 C1 并将其加粗）。

以下是供您参考的代码：-

HTML代码：-

<div ui-grid="gridOptions2" ui-grid-pagination ui-grid-selection ui-grid-exporter class="myGrid"></div>

AngularJS代码：-

$scope.gridOptions2 = {
    paginationPageSizes: [25, 50, 75],
    paginationPageSize: 25,
    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 ( grid, workbook, docDefinition ) {

      var stylesheet = workbook.getStyleSheet();
      var stdStyle = stylesheet.createFontStyle({
        size: 9, fontName: 'Calibri'
      });
      var boldStyle = stylesheet.createFontStyle({
        size: 9, fontName: 'Calibri', bold: true
      });
      var aFormatDefn = {
        "font": boldStyle.id,
        "alignment": { "wrapText": true }
      };
      var formatter = stylesheet.createFormat(aFormatDefn);
      // save the formatter
      $scope.formatters['bold'] = formatter;
      var dateFormatter = stylesheet.createSimpleFormatter('date');
      $scope.formatters['date'] = dateFormatter;

      aFormatDefn = {
        "font": stdStyle.id,
        "fill": { "type": "pattern", "patternType": "solid", "fgColor": "FFFFC7CE" },
        "alignment": { "wrapText": true }
      };
      var singleDefn = {
        font: stdStyle.id,
        format: '#,##0.0'
      };
      formatter = stylesheet.createFormat(aFormatDefn);
      // save the formatter
      $scope.formatters['red'] = formatter;

      Object.assign(docDefinition.styles , $scope.formatters);

      return docDefinition;
    },
    exporterExcelHeader: function (grid, workbook, sheet, docDefinition) {
        // this can be defined outside this method
        var stylesheet = workbook.getStyleSheet();
        var aFormatDefn = {
          "font": { "size": 11, "fontName": "Calibri", "bold": true },
          "alignment": { "wrapText": true }
        };
        var formatterId = stylesheet.createFormat(aFormatDefn);

        // excel cells start with A1 which is upper left corner
        sheet.mergeCells('B1', 'C1');
        var cols = [];
        // push empty data
        cols.push({ value: '' });
        // push data in B1 cell with metadata formatter
        cols.push({ value: 'My header that is long enough to wrap', metadata: {style: formatterId.id} });
        sheet.data.push(cols);
    },
    exporterFieldFormatCallback: function(grid, row, gridCol, cellValue) {
     // set metadata on export data to set format id. See exportExcelHeader config above for example of creating
     // a formatter and obtaining the id
     var formatterId = null;
     if (gridCol.field === 'name' && cellValue && cellValue.startsWith('W')) {
       formatterId = $scope.formatters['red'].id;
     }

     if (gridCol.field === 'updatedDate') {
       formatterId = $scope.formatters['date'].id;
     }

     if (formatterId) {
       return {metadata: {style: formatterId}};
     } else {
       return null;
     }
    },
    exporterColumnScaleFactor: 4.5,
    exporterFieldApplyFilters: true,
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
    },
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
    }
  };

我想用一些自定义样式导出网格数据，例如：-将表标题加粗并在导出到excel时更改其背景颜色。

我尝试过搜索，但是找不到任何解决方案或提示。

AngularJS ui-grid导出具有单元格样式的表

0 个答案: