Skip to content

Commit b2064ec

Browse files
Sridhar-KarunakaranSridhar-Karunakaran
committed
Updating the samples
1 parent 07e3d69 commit b2064ec

File tree

241 files changed

+233595
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

241 files changed

+233595
-2
lines changed

‎README.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,10 @@
1-
# export-angular-pivot-table-to-pdf-document-with-advanced-customization
2-
Export angular pivot-table to pdf document with advanced customization
1+
# Export-angular-pivot-table-to-pdf-document-with-advanced-customization
2+
This Angular project shows you how to export pivot table as PDF document with advanced customization.
3+
4+
# Project pre-requisites
5+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
6+
7+
8+
### How to run this samples?
9+
10+
open the desired samples in Visual Studio Code. Then, simply install all the necessary angular packages into your current project using the `npm install` command and run your project using the `ng serve` command.

‎add-custom-font/angular.json‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"syncfusion-component": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist",
17+
"index": "index.html",
18+
"main": "src/main.ts",
19+
"tsConfig": "tsconfig.json",
20+
"scripts": [
21+
"./node_modules/zone.js/dist/zone.min.js"
22+
],
23+
"styles": [
24+
"src/styles.css"
25+
],
26+
"assets": [
27+
28+
]
29+
},
30+
"configurations": {
31+
"production": {
32+
"budgets": [
33+
{
34+
"type": "initial",
35+
"maximumWarning": "500kb",
36+
"maximumError": "10mb"
37+
},
38+
{
39+
"type": "anyComponentStyle",
40+
"maximumWarning": "2kb",
41+
"maximumError": "4kb"
42+
}
43+
],
44+
"outputHashing": "all"
45+
},
46+
"development": {
47+
"buildOptimizer": false,
48+
"optimization": false,
49+
"vendorChunk": true,
50+
"extractLicenses": false,
51+
"sourceMap": true,
52+
"namedChunks": true
53+
}
54+
},
55+
"defaultConfiguration": "production"
56+
},
57+
"serve": {
58+
"builder": "@angular-devkit/build-angular:dev-server",
59+
"configurations": {
60+
"production": {
61+
"browserTarget": "syncfusion-component:build:production"
62+
},
63+
"development": {
64+
"browserTarget": "syncfusion-component:build:development"
65+
}
66+
},
67+
"defaultConfiguration": "development"
68+
}
69+
}
70+
}
71+
},
72+
"cli": {
73+
"analytics": false
74+
}
75+
}

‎add-custom-font/index.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Syncfusion Angular Pivot Grid</title>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="description" content="Typescript UI Controls" />
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
9+
<meta name="author" content="Syncfusion" />
10+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
11+
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
12+
<style>
13+
#loader {
14+
color: #008cff;
15+
font-family: 'Helvetica Neue', 'calibiri';
16+
font-size: 16px;
17+
height: 40px;
18+
left: 45%;
19+
position: absolute;
20+
top: 45%;
21+
width: 30%;
22+
}
23+
.e-custom-class {
24+
color: #008cff;
25+
text-decoration: underline;
26+
}
27+
.e-custom-class:hover {
28+
color: red;
29+
text-decoration: none;
30+
}
31+
#PivotViewFieldList {
32+
float: left;
33+
width: 58% !important;
34+
height: 100%;
35+
}
36+
#PivotFieldList {
37+
float: right;
38+
width: 42%;
39+
height: 100%;
40+
}
41+
#PivotFieldList .e-static {
42+
width: 100% !important;
43+
}
44+
#PivotView {
45+
display: block;
46+
width: 100%;
47+
height: 100%;
48+
}
49+
.e-pivotview .e-columnsheader .tempwrap {
50+
display: none;
51+
}
52+
.e-pivotview .e-rowsheader .tempwrap {
53+
display: none;
54+
}
55+
@font-face {
56+
font-family: 'e-pivot';
57+
src:
58+
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjhUSmAAAAEoAAAAVmNtYXCs3q0zAAABkAAAAEpnbHlmdaItOwAAAegAAAE0aGVhZBRYEz0AAADQAAAANmhoZWEHmQNtAAAArAAAACRobXR4D7gAAAAAAYAAAAAQbG9jYQDAAHIAAAHcAAAACm1heHABDwBBAAABCAAAACBuYW1lc0cOBgAAAxwAAAIlcG9zdK9TctUAAAVEAAAARwABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAT8kba18PPPUACwPoAAAAANin5zgAAAAA2KfnOAAAAAAD6gPoAAAACAACAAAAAAAAAAEAAAAEADUAAQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPuAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA4jToTQNS/2oAWgPoAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQANgAAAAgACAACAADiNOI56E3//wAA4jTiOehN//8AAAAAAAAAAQAIAAgACAAAAAEAAwACAAAAAAAAACYAcgCaAAAAAQAAAAADTAPoABUAAAkBBhY7AREUFjsBMjY1ETMyNicBJiIB3f7KCw4SxxAMqgwQxhIPC/7FCBgD3/6tDyH9wAwQEAwCQCEPAVMJAAEAAAAAA+oDTAA0AAABMx8BAR8DDwMBDwMjLwwhLwE1NzUnPwEhPwQ1PwQCXgIFCQFxBAIEAgEDBAf+ogYKBQUEAwQDAwICAQIBAQYJCf3mAgEDAgEBAh4KCAQCAQICAgIDA0wBBf7VAwQJCQkJCQf+4QQGAgEBAQIDBAQFC50DBAQDAQICCuANAgECBQIDAqcMBQQDAQAAAQAAAAADTAPoABYAAAEGFREjIgYXARYyNwE2JisBETQmKwEiAYsIxhIPDAE5CRgJATUMDhPGEAyqDAPgCAz9wCEP/q0JCQFTDyECQAwQAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAcAAQABAAAAAAACAAcACAABAAAAAAADAAcADwABAAAAAAAEAAcAFgABAAAAAAAFAAsAHQABAAAAAAAGAAcAKAABAAAAAAAKACwALwABAAAAAAALABIAWwADAAEECQAAAAIAbQADAAEECQABAA4AbwADAAEECQACAA4AfQADAAEECQADAA4AiwADAAEECQAEAA4AmQADAAEECQAFABYApwADAAEECQAGAA4AvQADAAEECQAKAFgAywADAAEECQALACQBIyBlLWljb25zUmVndWxhcmUtaWNvbnNlLWljb25zVmVyc2lvbiAxLjBlLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAZQAtAGkAYwBvAG4AcwBlAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQBAgEDAQQBBQADVXAxC2Fycm93LXJpZ2h0CURvd25fU29ydAAAAA==) format('truetype');
59+
font-weight: normal;
60+
font-style: normal;
61+
}
62+
.pv-icons {
63+
font-family: 'e-pivot';
64+
font-style: normal;
65+
font-variant: normal;
66+
font-weight: normal;
67+
text-transform: none;
68+
line-height: 1;
69+
}
70+
.sb-icon-profit::before {
71+
content: '\e234';
72+
padding-left: 30px;
73+
margin: auto !important;
74+
color: #219122;
75+
size: 20px;
76+
}
77+
.sb-icon-neutral::before {
78+
content: '\e84d';
79+
padding-left: 30px;
80+
margin: auto !important;
81+
color: #82b5e9;
82+
}
83+
.sb-icon-loss::before {
84+
content: '\e239';
85+
padding-left: 30px;
86+
margin: auto !important;
87+
color: #ff2222;
88+
}
89+
.e-pivotview .e-tool-expand::before {
90+
content: '\e702';
91+
}
92+
</style>
93+
</head>
94+
<body>
95+
<app-container>
96+
<div id='loader'>Loading....</div>
97+
</app-container>
98+
</body>
99+
</html>

‎add-custom-font/package.json‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"name": "syncfusion-component",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/core": "^15.0.0",
14+
"@angular/platform-browser": "^15.0.0",
15+
"@angular/platform-browser-dynamic": "^15.0.0",
16+
"@syncfusion/ej2-angular-pivotview": "*",
17+
"@syncfusion/ej2-base": "*",
18+
"@syncfusion/ej2-buttons": "*",
19+
"@syncfusion/ej2-dropdowns": "*",
20+
"@syncfusion/ej2-grids": "*",
21+
"@syncfusion/ej2-inputs": "*",
22+
"@syncfusion/ej2-lists": "*",
23+
"@syncfusion/ej2-navigations": "*",
24+
"@syncfusion/ej2-popups": "*",
25+
"@syncfusion/ej2-splitbuttons": "*",
26+
"@syncfusion/ej2-angular-base": "*",
27+
"@angular/animations": "^15.0.0",
28+
"@angular/common": "^15.0.0",
29+
"@angular/compiler": "^15.0.0",
30+
"@angular/forms": "^15.0.0",
31+
"@angular/router": "^15.0.0",
32+
"moment": "^2.29.4",
33+
"rxjs": "~7.5.0",
34+
"tslib": "^2.3.0",
35+
"zone.js": "~0.12.0",
36+
"@syncfusion/ej2-pivotview": "*"
37+
},
38+
"devDependencies": {
39+
"@angular-devkit/build-angular": "^15.0.0",
40+
"@angular/cli": "~15.0.0",
41+
"@angular/compiler-cli": "^15.0.0",
42+
"@types/jasmine": "~4.3.0",
43+
"jasmine-core": "~4.5.0",
44+
"karma": "~6.4.0",
45+
"karma-chrome-launcher": "~3.1.0",
46+
"karma-coverage": "~2.2.0",
47+
"karma-jasmine": "~5.1.0",
48+
"karma-jasmine-html-reporter": "~2.0.0",
49+
"typescript": "~4.8.2"
50+
}
51+
}

‎add-custom-font/src/app.component.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/* csslint ignore:start */
2+
#PivotViewFieldList {
3+
float: left;
4+
width: 58% !important;
5+
height: 100%;
6+
}
7+
8+
#PivotFieldList {
9+
float: right;
10+
width: 42%;
11+
height: 100%;
12+
}
13+
14+
#PivotFieldList .e-static {
15+
width: 100% !important;
16+
}
17+
/* csslint ignore:end */
18+
19+
20+
.e-pivotview .e-columnsheader .tempwrap {
21+
display: none;
22+
}
23+
.e-pivotview .e-rowsheader .tempwrap {
24+
display: none;
25+
}
26+
27+
/* csslint ignore:start */
28+
@font-face {
29+
font-family: 'e-pivot';
30+
src:
31+
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjhUSmAAAAEoAAAAVmNtYXCs3q0zAAABkAAAAEpnbHlmdaItOwAAAegAAAE0aGVhZBRYEz0AAADQAAAANmhoZWEHmQNtAAAArAAAACRobXR4D7gAAAAAAYAAAAAQbG9jYQDAAHIAAAHcAAAACm1heHABDwBBAAABCAAAACBuYW1lc0cOBgAAAxwAAAIlcG9zdK9TctUAAAVEAAAARwABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAT8kba18PPPUACwPoAAAAANin5zgAAAAA2KfnOAAAAAAD6gPoAAAACAACAAAAAAAAAAEAAAAEADUAAQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPuAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA4jToTQNS/2oAWgPoAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQANgAAAAgACAACAADiNOI56E3//wAA4jTiOehN//8AAAAAAAAAAQAIAAgACAAAAAEAAwACAAAAAAAAACYAcgCaAAAAAQAAAAADTAPoABUAAAkBBhY7AREUFjsBMjY1ETMyNicBJiIB3f7KCw4SxxAMqgwQxhIPC/7FCBgD3/6tDyH9wAwQEAwCQCEPAVMJAAEAAAAAA+oDTAA0AAABMx8BAR8DDwMBDwMjLwwhLwE1NzUnPwEhPwQ1PwQCXgIFCQFxBAIEAgEDBAf+ogYKBQUEAwQDAwICAQIBAQYJCf3mAgEDAgEBAh4KCAQCAQICAgIDA0wBBf7VAwQJCQkJCQf+4QQGAgEBAQIDBAQFC50DBAQDAQICCuANAgECBQIDAqcMBQQDAQAAAQAAAAADTAPoABYAAAEGFREjIgYXARYyNwE2JisBETQmKwEiAYsIxhIPDAE5CRgJATUMDhPGEAyqDAPgCAz9wCEP/q0JCQFTDyECQAwQAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAcAAQABAAAAAAACAAcACAABAAAAAAADAAcADwABAAAAAAAEAAcAFgABAAAAAAAFAAsAHQABAAAAAAAGAAcAKAABAAAAAAAKACwALwABAAAAAAALABIAWwADAAEECQAAAAIAbQADAAEECQABAA4AbwADAAEECQACAA4AfQADAAEECQADAA4AiwADAAEECQAEAA4AmQADAAEECQAFABYApwADAAEECQAGAA4AvQADAAEECQAKAFgAywADAAEECQALACQBIyBlLWljb25zUmVndWxhcmUtaWNvbnNlLWljb25zVmVyc2lvbiAxLjBlLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAZQAtAGkAYwBvAG4AcwBlAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQBAgEDAQQBBQADVXAxC2Fycm93LXJpZ2h0CURvd25fU29ydAAAAA==) format('truetype');
32+
font-weight: normal;
33+
font-style: normal;
34+
}
35+
36+
.pv-icons {
37+
font-family: 'e-pivot';
38+
font-style: normal;
39+
font-variant: normal;
40+
font-weight: normal;
41+
text-transform: none;
42+
line-height: 1;
43+
}
44+
45+
.sb-icon-profit::before {
46+
content: '\e234';
47+
padding-left: 30px;
48+
margin: auto !important;
49+
color: #219122;
50+
size: 20px;
51+
}
52+
53+
.sb-icon-neutral::before {
54+
content: '\e84d';
55+
padding-left: 30px;
56+
margin: auto !important;
57+
color: #82b5e9;
58+
}
59+
60+
.sb-icon-loss::before {
61+
content: '\e239';
62+
padding-left: 30px;
63+
margin: auto !important;
64+
color: #ff2222;
65+
}
66+
67+
.e-pivotview .e-tool-expand::before {
68+
content: '\e702';
69+
}
70+
71+
.fileUpload {
72+
position: relative;
73+
overflow: hidden;
74+
margin: 10px;
75+
}
76+
77+
.fileUpload input.upload {
78+
position: absolute;
79+
top: 0;
80+
right: 0;
81+
margin: 0;
82+
padding: 0;
83+
font-size: 20px;
84+
cursor: pointer;
85+
opacity: 0;
86+
filter: alpha(opacity=0);
87+
}
88+
89+
/* csslint ignore:end */

‎add-custom-font/src/app.component.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
2+
3+
import { Component, OnInit, ViewChild } from '@angular/core';
4+
import { IDataOptions, IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
5+
import { Button } from '@syncfusion/ej2-buttons';
6+
import { PdfExportProperties } from '@syncfusion/ej2-grids';
7+
import { Pivot_Data, base64AlgeriaFont } from './datasource';
8+
import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export';
9+
10+
@Component({
11+
selector: 'app-container',
12+
template: `<div class="col-md-8">
13+
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' width=width></ejs-pivotview></div>
14+
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`
15+
})
16+
export class AppComponent implements OnInit {
17+
public width?: string;
18+
public dataSourceSettings?: IDataOptions;
19+
public button?: Button;
20+
public pdfExportProperties?: PdfExportProperties;
21+
22+
@ViewChild('pivotview', {static: false})
23+
public pivotGridObj?: PivotView;
24+
25+
ngOnInit(): void {
26+
27+
this.width = "100%";
28+
29+
this.dataSourceSettings = {
30+
dataSource: Pivot_Data as IDataSet[],
31+
columns: [{ name: 'Year', caption: 'Production Year' }],
32+
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
33+
rows: [{ name: 'Country' }, { name: 'Products' }],
34+
formatSettings: [{ name: 'Amount', format: 'C0' }],
35+
filters: [],
36+
};
37+
38+
this.button = new Button({ isPrimary: true });
39+
this.button.appendTo('#export');
40+
41+
this.button.element.onclick = (): void => {
42+
this.pdfExportProperties = {
43+
theme: {
44+
header: {font: new PdfTrueTypeFont(base64AlgeriaFont, 11) },
45+
caption: { font: new PdfTrueTypeFont(base64AlgeriaFont, 9) },
46+
record: { font: new PdfTrueTypeFont(base64AlgeriaFont, 10) }
47+
}
48+
};
49+
this.pivotGridObj?.pdfExport(this.pdfExportProperties);
50+
};
51+
}
52+
}
53+
54+
55+

0 commit comments

Comments
 (0)