Multiple pivot table export samples has been added.

Author: SasthaPrathap

package.json

@@ -18,7 +18,8 @@
     "@angular/platform-browser": "^15.1.0",
     "@angular/platform-browser-dynamic": "^15.1.0",
     "@angular/router": "^15.1.0",
-    "@syncfusion/ej2-angular-pivotview": "^23.1.38",
+    "@syncfusion/ej2-angular-grids": "^23.1.44",
+    "@syncfusion/ej2-angular-pivotview": "^23.1.44",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"

src/app/app-routing.module.ts

@@ -14,12 +14,20 @@ import { MultipleExportingComponent } from './multiple-exporting/multiple-export
 import { ChangePageSizeComponent } from './change-page-size/change-page-size.component';
 import { ChangeTableColumnWidthAndRowHeightComponent } from './change-column-width-and-row-height/change-column-width-and-row-height.component';
 import { ChangePivotTableStyleComponent } from './change-pivot-table-style/change-pivot-table-style.component';
+import { PivotChartExportingComponent } from './pivot-chart-exporting/pivotchart-exporting.component';
+import { MultiplePivotChartExportingComponent } from './multiple-pivot-chart-exporting/multiple-pivotchart-exporting.component';
+import { MultipleTableChartExportingComponent } from './multiple-pivottable-pivotchart-exporting/pivottable-pivotchart-exporting.component';
+import { ExternalTableExportingComponent } from './pivottable-with-external-table-exporting/pivottable-with-grid-exporting.component';
 
 const routes: Routes = [
   {
     component:TableExportingComponent,
     path:''
   },
+  {
+    component:PivotChartExportingComponent,
+    path:'pivotChartExporting'
+  },
   {
     component:ChangeFilenameComponent,
     path:'changeFilename'
@@ -60,6 +68,18 @@ const routes: Routes = [
     component:MultipleExportingComponent,
     path:'multipleExport'
   },
+  {
+    component:MultiplePivotChartExportingComponent,
+    path:'multiplePivotChartExport'
+  },
+  {
+    component:MultipleTableChartExportingComponent,
+    path:'multiplePivotTableAndChartExport'
+  },
+  {
+    component:ExternalTableExportingComponent,
+    path:'externalTableChartExport'
+  },
   {
     component:ChangePageSizeComponent,
     path:'changePageSize'

src/app/app.component.html

@@ -5,6 +5,9 @@ <h1>Exporting customization</h1>
     <li>
       <a routerLink=''>Default exporting</a>
     </li>
+    <li>
+      <a routerLink="pivotChartExporting">Pivot Chart exporting</a>
+    </li>
     <li>
       <a routerLink="addingCustomFont">Add customFont</a>
     </li>
@@ -41,6 +44,15 @@ <h1>Exporting customization</h1>
     <li>
       <a routerLink="multipleExport">Multiple export</a>
     </li>
+    <li>
+      <a routerLink="multiplePivotChartExport">Multiple Pivot Chart export</a>
+    </li>
+    <li>
+      <a routerLink="multiplePivotTableAndChartExport">Multiple Pivot Table And Chart export</a>
+    </li>
+    <li>
+      <a routerLink="externalTableChartExport">Pivot Table with external Table and Chart export</a>
+    </li>
     <li>
       <a routerLink="blobData">Blob data</a>
     </li>

src/app/app.module.ts

@@ -1,8 +1,10 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
+import { GridAllModule } from '@syncfusion/ej2-angular-grids';
 import { AppComponent } from './app.component';
 import { TableExportingComponent } from './exporting/exporting.component';
+import { PivotChartExportingComponent } from './pivot-chart-exporting/pivotchart-exporting.component';
 import { TableAndChartExportComponent } from './table-and-chart-export/table-and-chart-export.component';
 import { AddHeaderAndFooterComponent } from './add-header-and-footer/add-header-and-footer.component';
 import { ChangePageOrientationComponent } from './change-page-orientation/change-page-orientation.component';
@@ -18,6 +20,9 @@ import { ExportAllPagesComponent } from './export-all-pages/export-all-pages.com
 import { ChangePageSizeComponent } from './change-page-size/change-page-size.component';
 import { ChangeTableColumnWidthAndRowHeightComponent } from './change-column-width-and-row-height/change-column-width-and-row-height.component';
 import { ChangePivotTableStyleComponent } from './change-pivot-table-style/change-pivot-table-style.component';
+import { MultiplePivotChartExportingComponent } from './multiple-pivot-chart-exporting/multiple-pivotchart-exporting.component';
+import { MultipleTableChartExportingComponent } from './multiple-pivottable-pivotchart-exporting/pivottable-pivotchart-exporting.component';
+import { ExternalTableExportingComponent } from './pivottable-with-external-table-exporting/pivottable-with-grid-exporting.component';
 
 /**
  * Module
@@ -27,13 +32,14 @@ import { ChangePivotTableStyleComponent } from './change-pivot-table-style/chang
         BrowserModule,
         PivotViewAllModule,
         PivotFieldListAllModule,
+        GridAllModule,
         RouterModule,
         AppRoutingModule
     ],
-    declarations: [AppComponent, TableExportingComponent, TableAndChartExportComponent, AddHeaderAndFooterComponent, 
-        ChangePageOrientationComponent, ChangeDocumentWidthAndHeightComponent, CustomizeColumnCountComponent, 
-        AddingCustomFontComponent, MultipleExportingComponent, ExportBlobDataComponent, ExportAllPagesComponent, 
-        ChangePageSizeComponent, ChangeFilenameComponent, ChangeTableColumnWidthAndRowHeightComponent, ChangePivotTableStyleComponent
+    declarations: [AppComponent, TableExportingComponent, PivotChartExportingComponent, TableAndChartExportComponent, AddHeaderAndFooterComponent, 
+        ChangePageOrientationComponent, ChangeDocumentWidthAndHeightComponent, CustomizeColumnCountComponent, AddingCustomFontComponent,
+        MultipleExportingComponent, MultiplePivotChartExportingComponent, MultipleTableChartExportingComponent, ExternalTableExportingComponent, ExportBlobDataComponent,
+        ExportAllPagesComponent, ChangePageSizeComponent, ChangeFilenameComponent, ChangeTableColumnWidthAndRowHeightComponent, ChangePivotTableStyleComponent
     ],
     bootstrap: [AppComponent]
 })

src/app/data.ts

@@ -3081,4 +3081,81 @@ function getClassDate(data: Object[]): Object[] {
         delete ((data[ln] as any)['Date']);
     }
     return data;
-}
+}
+
+export let grid_Ddata: Object[] = [
+    {
+        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
+        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
+        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
+    },
+    {
+        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
+        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
+        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
+    },
+    {
+        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
+        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
+        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
+    },
+    {
+        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
+        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
+        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
+    },
+    {
+        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
+        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
+        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
+    },
+    {
+        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
+        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
+        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
+    },
+    {
+        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
+        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
+        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
+    },
+    {
+        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
+        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
+        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
+    },
+    {
+        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
+        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
+        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
+    },
+    {
+        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
+        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
+        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
+    },
+    {
+        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
+        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
+        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
+    },
+    {
+        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
+        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
+        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
+    },
+    {
+        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
+        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
+        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
+    },
+    {
+        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
+        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
+        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
+    },
+    {
+        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
+        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
+        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
+    }];

src/app/exporting/exporting.component.ts

@@ -36,8 +36,8 @@ export class TableExportingComponent implements OnInit {
         this.button.appendTo('#export');
 
         this.button.element.onclick = (): void => {
-            let pdfExportProperties: PdfExportProperties = { };
-            this.pivotGridObj.pdfExport(pdfExportProperties, false, undefined, false);
+            let pdfExportProperties: PdfExportProperties = { fileName: 'ProductSalesReport',};
+            this.pivotGridObj.pdfExport(pdfExportProperties);
         };
     }
 }

src/app/multiple-exporting/multiple-exporting.component.html

@@ -1,8 +1,10 @@
 <h4>Multiple export</h4>
 <div class="col-md-2"><button ej-button id='export'>Export</button></div>
 <div class="col-md-8">
+    <h2>Pivot Table 1</h2>
     <ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true'
         (load)='load()' width=width></ejs-pivotview>
+    <h2>Pivot Table 2</h2>
     <ejs-pivotview #pivotview1 id='PivotView1' [dataSourceSettings]=dataSourceSettings1 allowPdfExport='true'
         (load)='load1()'width=width></ejs-pivotview>
 </div>

src/app/multiple-exporting/multiple-exporting.component.ts

@@ -59,10 +59,12 @@ export class MultipleExportingComponent implements OnInit {
         this.button.appendTo('#export');
 
         this.button.element.onclick = (): void => {
-            this.firstGridPdfExport = this.pivotGridObj.pdfExport({}, true);
-            this.firstGridPdfExport.then((pdfData: Object) => {
-                this.pivotGridObj1.pdfExport({}, false, pdfData);
-            });
+          // Here we export the pivot table 1 as a PDF document and save it as an object in the variable firstGridPdfExport.
+          this.firstGridPdfExport = this.pivotGridObj.pdfExport({}, true);
+          this.firstGridPdfExport.then((pdfData: Object) => {
+              // Here we export both pivot table 2 to the PDF document object "pdfData" that contains the pivot table 1 and the pivot table 2 and is exported as a downloadable file.
+              this.pivotGridObj1.pdfExport({}, false, pdfData);
+          });
         };
     }
 }

src/app/multiple-pivot-chart-exporting/multiple-pivotchart-exporting.component.css

@@ -0,0 +1,62 @@
+/* csslint ignore:start */
+#export-btn {
+    margin-bottom: 10px;
+}
+
+#PivotViewFieldList {
+    float: left;
+    width: 58% !important;
+    height: 100%;
+}
+
+#PivotFieldList {
+    float: right;
+    width: 42%;
+    height: 100%;
+}
+
+#PivotFieldList .e-static {
+    width: 100% !important;
+}
+/* csslint ignore:end */
+
+
+.e-pivotview .e-columnsheader .tempwrap {
+    display: none;
+}
+.e-pivotview .e-rowsheader .tempwrap {
+    display: none;
+}
+  
+/* csslint ignore:start */
+@font-face {
+    font-family: 'e-pivot';
+    src:
+        url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjhUSmAAAAEoAAAAVmNtYXCs3q0zAAABkAAAAEpnbHlmdaItOwAAAegAAAE0aGVhZBRYEz0AAADQAAAANmhoZWEHmQNtAAAArAAAACRobXR4D7gAAAAAAYAAAAAQbG9jYQDAAHIAAAHcAAAACm1heHABDwBBAAABCAAAACBuYW1lc0cOBgAAAxwAAAIlcG9zdK9TctUAAAVEAAAARwABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAT8kba18PPPUACwPoAAAAANin5zgAAAAA2KfnOAAAAAAD6gPoAAAACAACAAAAAAAAAAEAAAAEADUAAQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPuAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA4jToTQNS/2oAWgPoAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQANgAAAAgACAACAADiNOI56E3//wAA4jTiOehN//8AAAAAAAAAAQAIAAgACAAAAAEAAwACAAAAAAAAACYAcgCaAAAAAQAAAAADTAPoABUAAAkBBhY7AREUFjsBMjY1ETMyNicBJiIB3f7KCw4SxxAMqgwQxhIPC/7FCBgD3/6tDyH9wAwQEAwCQCEPAVMJAAEAAAAAA+oDTAA0AAABMx8BAR8DDwMBDwMjLwwhLwE1NzUnPwEhPwQ1PwQCXgIFCQFxBAIEAgEDBAf+ogYKBQUEAwQDAwICAQIBAQYJCf3mAgEDAgEBAh4KCAQCAQICAgIDA0wBBf7VAwQJCQkJCQf+4QQGAgEBAQIDBAQFC50DBAQDAQICCuANAgECBQIDAqcMBQQDAQAAAQAAAAADTAPoABYAAAEGFREjIgYXARYyNwE2JisBETQmKwEiAYsIxhIPDAE5CRgJATUMDhPGEAyqDAPgCAz9wCEP/q0JCQFTDyECQAwQAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAcAAQABAAAAAAACAAcACAABAAAAAAADAAcADwABAAAAAAAEAAcAFgABAAAAAAAFAAsAHQABAAAAAAAGAAcAKAABAAAAAAAKACwALwABAAAAAAALABIAWwADAAEECQAAAAIAbQADAAEECQABAA4AbwADAAEECQACAA4AfQADAAEECQADAA4AiwADAAEECQAEAA4AmQADAAEECQAFABYApwADAAEECQAGAA4AvQADAAEECQAKAFgAywADAAEECQALACQBIyBlLWljb25zUmVndWxhcmUtaWNvbnNlLWljb25zVmVyc2lvbiAxLjBlLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAZQAtAGkAYwBvAG4AcwBlAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQBAgEDAQQBBQADVXAxC2Fycm93LXJpZ2h0CURvd25fU29ydAAAAA==) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+  
+.e-pivotview .e-tool-expand::before {
+    content: '\e702';
+}
+
+.fileUpload {
+    position: relative;
+    overflow: hidden;
+    margin: 10px;
+}
+
+.fileUpload input.upload {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    padding: 0;
+    font-size: 20px;
+    cursor: pointer;
+    opacity: 0;
+    filter: alpha(opacity=0);
+}
+
+/* csslint ignore:end */

src/app/multiple-pivot-chart-exporting/multiple-pivotchart-exporting.component.html

@@ -0,0 +1,8 @@
+<h4>Multiple export</h4>
+<div class="col-md-2"><button ej-button id='export-btn'>Export</button></div>
+<div class="col-md-8">
+    <ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true'
+        (load)='load()' width=width [displayOption]='displayOption' [chartSettings]='chartSettings'></ejs-pivotview>
+    <ejs-pivotview #pivotview1 id='PivotView1' [dataSourceSettings]=dataSourceSettings1 allowPdfExport='true'
+        (load)='load1()'width=width [displayOption]='displayOption' [chartSettings]='chartSettings1'></ejs-pivotview>
+</div>