Customizing Cell Styles of PDF/Excel Export

Question

I am attempting to change the sizes of cells when exporting data from a grid to a pdf document/excel spread sheet. I've looked at the current documentation on Syncfusion to find this information myself but I couldn't find anything about manually adjusting the sizes of columns of PDF/Excel exports. https://ej2.syncfusion.com/vue/documentation/grid/pdf-export/pdf-cell-style-customization/

Additionally, I can't seem to find a way to change the background color of header cells of PDF/Excel documents exported either. I've noticed there's a way to change the font color itself of cells but not of a way of changing the background color of cells. https://ej2.syncfusion.com/vue/documentation/api/grid/pdfThemeStyle/

Rajapandiyan Settu · Accepted Answer

Hi Khalipha,Thanks for contacting Syncfusion support.Query #1: I am attempting to change the sizes of cells
when exporting data from a grid to a pdf document/excel spread sheet.In EJ2 Grid Excel Export, the columns are exported based on
their width. If you want to increase/decrease the width of column on export, you
can achieve it by using the following code in toolbarClick and
excelExportComplete events.toolbarClick: https://ej2.syncfusion.com/vue/documentation/api/grid/#toolbarclickexcelExportComplete: https://ej2.syncfusion.com/vue/documentation/api/grid/#excelexportcomplete

toolbarClick: function (args) {
        switch (args.item.text) {
          case
  "Excel Export":
           
  // change the column’s width before perform export action
            this.$refs.grid.ej2Instances.columns[0].width
  = 250;
           
  this.$refs.grid.ej2Instances.columns[1].width = 250;
           
  this.$refs.grid.ej2Instances.columns[2].width = 250;
           
  this.$refs.grid.ej2Instances.columns[3].width = 250;
           
  this.$refs.grid.excelExport();
           
  break;
        }
      },
      excelExportComplete: function (args) {
       
  // restore the column’s width after excel export completed
        this.$refs.grid.ej2Instances.columns[0].width =
  80;
       
  this.$refs.grid.ej2Instances.columns[1].width = 80;
       
  this.$refs.grid.ej2Instances.columns[2].width = 80;
       
  this.$refs.grid.ej2Instances.columns[3].width = 80;
      },

Query #2: I can't seem to find a way to change the
background color of header cells of PDF/Excel documents exported eitherBy using pdfHeaderQueryCellInfo, pdfQueryCellInfo,
excelHeaderQueryCellInfo and excelQueryCellInfo events you can
customize the style of grid header and contents on exporting.https://ej2.syncfusion.com/vue/documentation/api/grid/#excelheaderquerycellinfohttps://ej2.syncfusion.com/vue/documentation/api/grid/#excelquerycellinfohttps://ej2.syncfusion.com/vue/documentation/api/grid/#pdfheaderquerycellinfohttps://ej2.syncfusion.com/vue/documentation/api/grid/#pdfquerycellinfo

excelHeaderQueryCellInfo: function
  (args) {
        args.style = { backColor:
  "#ff704d" };
      },
      excelQueryCellInfo: function (args) {
        if (args.column.field ===
  "CustomerID") {
          args.style = {
  backColor: "#ff704d" };
        }
      },
      pdfHeaderQueryCellInfo: function (args)
  {
       
  // customize the style of PDF Grid header
        var backColor =
  this.$refs.grid.ej2Instances.pdfExportModule.hexToRgb("#ff704d");
       
  args.cell.style.backgroundBrush = new PdfSolidBrush(new PdfColor(backColor.r,
  backColor.g, backColor.b));
      },
      pdfQueryCellInfo: function (args) {
        if (args.column.field ===
  "CustomerID") {
          args.style = {
  backgroundColor: "#ff704d" };
        }
      }

Sample: https://codesandbox.io/s/vue-template-forked-0trpj6?file=/src/App.vuePlease get back to us if you need further assistance with
this.Regards,Rajapandiyan S

Khalipha Thomas · Answer

Thank you I have another query if you wouldn't mind answering while we're on the subject of pdf/excel exporting. If I wanted to omit a column in my grid for an export, how would I go about accomplishing this?

Rajapandiyan Settu · Answer

Hi Khalipha,Thanks for your update. We are always happy to assist you.Query #3: I wanted to omit a column in my grid for an
export, how would I go about accomplishing this?.You can show a hidden column or hide a visible column while
exporting the grid using toolbarClick and pdfExportComplete & excelExportComplete
events.In the toolbarClick event, We can show or hide columns by
setting column.visible property to true or false respectively
before starting export.In the pdfExportComplete/excelExportComplete event,
we reversed the state back to the previous state.Show/hide columns on export:
https://ej2.syncfusion.com/vue/documentation/grid/pdf-export/pdf-export-options/#show-or-hide-columns
https://ej2.syncfusion.com/vue/documentation/grid/excel-export/excel-export-options/#show-or-hide-columns

toolbarClick: function (args) {
        switch (args.item.text) {
          case "PDF
  Export":
           
  // change the columns’ visibility
            this.$refs.grid.ej2Instances.columns[2].visible
  = false;
            this.$refs.grid.ej2Instances.columns[3].visible
  = false;

this.$refs.grid.pdfExport();
           
  break;
          case
  "Excel Export":
            // change the columns’ visibility
            this.$refs.grid.ej2Instances.columns[2].visible
  = false;
            this.$refs.grid.ej2Instances.columns[3].visible
  = false;

this.$refs.grid.excelExport();
           
  break;
        }
      },
      excelExportComplete: function (args) {
       
  // restore the column's visibility
        this.$refs.grid.ej2Instances.columns[2].visible
  = true;
        this.$refs.grid.ej2Instances.columns[3].visible
  = true;
      },
      pdfExportComplete: function (args) {
       
  // restore the column's visibility
        this.$refs.grid.ej2Instances.columns[2].visible
  = true;
        this.$refs.grid.ej2Instances.columns[3].visible
  = true;
      }

Sample: https://codesandbox.io/s/vue-template-forked-gqepqc?file=/src/App.vuePlease get back to us if you need further assistance.Regards,Rajapandiyan S