We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Add Cover Page with "Table of Contents" to an Excel Spreadsheet

Hi,

I am exporting multiple grids to a single Excel Spreadsheet, with each grid on a separate page:
        ExcelExportProperties = { multipleExport: { type: 'NewSheet' } }

I am following the examples in the link below but I am not sure how to add new worksheet/page to the excel document. 
       https://ej2.syncfusion.com/angular/documentation/grid/excel-export/export-multiple-grids
I need to add a cover page to the beginning of the Excel spreadsheet which will have "Table of Contents" on it, including hyperlinks to all other sheets in the spreadsheets that will allow users to navigate to them by a click.

What would be the way to achieve that?

Thank you!


5 Replies 1 reply marked as answer

RS Rajapandiyan Settu Syncfusion Team March 6, 2023 05:35 PM UTC

David,

Thanks for contacting Syncfusion support.


To navigate inside a workbook for different worksheets, file-level hyperlink support is needed. Currently, the EJ2 Excel export library does not have support for this. We logged a feature task for your requirement as Provide File level hyperlink support in Grid to Excel export and added it to our feature request database. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technical feasibility, and customer interest. This feature will be included in any of our upcoming releases. 


Feedback Link: https://www.syncfusion.com/feedback/41734/provide-file-level-hyperlink-support-in-grid-to-excel-export


You can communicate with us regarding the open features at any time using the above Feature Report page.  


Regards,

Rajapandiyan S



DA David Akobia March 7, 2023 04:09 PM UTC

Hi Rajapandiyan,

Thank you for your reply. I understand that the hyperlinks are not yet supported.

Is it possible to insert a new worksheet/page to the beginning of an excel document? If yes, could you tell me how?




RS Rajapandiyan Settu Syncfusion Team March 14, 2023 01:26 PM UTC

Hi David,

We have prepared the sample based on your requirement. By using the following code in the toolbarClick event, you can dynamically add a cover page while exporting multiple Grids with a new sheet.

sample: https://stackblitz.com/edit/angular-vfhwo5?file=src%2Fapp.component.ts

 

[app.component.ts]

  toolbarClick(args) {

    if (args.item.text == 'Excel Export') {

       // define a worksheet

      var excelData1: any = {

        worksheets: [

          {

            columns: [

              // define the columns you want in the cover page

              {

                index: 1,

                width: 120,

              },

            ],

            enableRtl: false,

            images: [],

            rows: [

              // define the rows you want in the cover page

              {

                index: 1,

                cells: [

                  {

                    index: 1,

                    value: 'Grid 1 - Sheet 2',

                    styles: {

                      bold: true,

                      borders: { color: '#E0E0E0' },

                      fontSize: 12,

                      hAlign: 'right',

                    },

                  },

                ],

              },

              {

                index: 2,

                cells: [

                  {

                    index: 1,

                    value: 'Grid 2 - Sheet 3',

                    styles: {

                      bold: true,

                      borders: { color: '#E0E0E0' },

                      fontSize: 12,

                      hAlign: 'right',

                    },

                  },

                ],

              },

              {

                index: 3,

                cells: [

                  {

                    index: 1,

                    value: 'Grid 3 - Sheet 4',

                    styles: {

                      bold: true,

                      borders: { color: '#E0E0E0' },

                      fontSize: 12,

                      hAlign: 'right',

                    },

                  },

                ],

              },

            ],

          },

        ],

        styles: [

          {

            borders: { color: '#E0E0E0' },

            fontSize: 13,

            hAlign: 'right',

          },

        ],

      };

      var appendExcelExportProperties: any = {

        multipleExport: { type: 'NewSheet' },

      };

     // export the multiple Grids with a cover page

      var firstGridExport = this.grid1.excelExport(appendExcelExportProperties, true, excelData1);

      firstGridExport.then((f1Data) => {

        var secondGridExport = this.grid2.excelExport(appendExcelExportProperties, true, f1Data);

        secondGridExport.then((f2Data) => {

          var thirdGridExport = this.grid3.excelExport(appendExcelExportProperties, false, f2Data);

        });

      });

    }

  }

 


Regards,

Rajapandiyan S


Marked as answer

DA David Akobia replied to Rajapandiyan Settu March 16, 2023 07:27 PM UTC

Thank you for your reply. 

Is it possible to dynamically build rows and cells for the Table of Contents based on the number of grids on the page as they might vary?



RS Rajapandiyan Settu Syncfusion Team March 17, 2023 08:44 AM UTC

Hi David,


Query: Is it possible to dynamically build rows and cells for the Table of Contents based on the number of grids on the page as they might vary?


We suspect that you want to dynamically create the content for the cover page. If so, you can achieve this by using the following way.

 

[app.component.ts]

  toolbarClick(args) {

    if (args.item.text == 'Excel Export') {

     // create the cover page

      var excelData1: any = {

        worksheets: [

          {

            columns: [

              // define the columns you want in the cover page

              {

                index: 1,

                width: 120,

              },

            ],

            enableRtl: false,

            images: [],

            rows: [], // define the content of cover page

          },

        ],

        styles: [

          {

            borders: { color: '#E0E0E0' },

            fontSize: 13,

            hAlign: 'right',

          },

        ],

      };

      // generate the content dynamically

 

      // get all the Grid

      var allGrids = document.getElementsByClassName('e-grid');

      // push the content based on your requirement

      for (var i = 0; i < allGrids.length; i++) {

        excelData1.worksheets[0].rows.push({

          index: i + 1,

          cells: [

            {

              index: 1,

              value: 'Grid ' + (i + 1) + '- Sheet ' + (i + 2),

              styles: {

                bold: true,

                borders: { color: '#E0E0E0' },

                fontSize: 12,

                hAlign: 'right',

              },

            },

          ],

        });

      }

      var appendExcelExportProperties: any = {

        multipleExport: { type: 'NewSheet' },

      };

      var firstGridExport = this.grid1.excelExport(

        appendExcelExportProperties,

        true,

        excelData1

      );

      ----

    }

  }

 


Sample: https://stackblitz.com/edit/angular-vfhwo5-pq9b2w?file=src%2Fapp.component.ts,src%2Fapp.component.html

Regards,

Rajapandiyan S


Loader.
Up arrow icon