From 46162ab99bad0116f8c008cd0e2e8b51fdeb8c9e Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Mon, 1 Sep 2025 18:46:42 +0530 Subject: [PATCH] 941119: Sample on How to Rotate all pages in the PDF with a single click --- .../.editorconfig | 17 ++ .../.gitignore | 42 ++++ .../README.md | 59 ++++++ .../angular.json | 104 ++++++++++ .../package.json | 46 +++++ .../public/favicon.ico | Bin 0 -> 15086 bytes .../src/app/app.component.css | 0 .../src/app/app.component.html | 16 ++ .../src/app/app.component.spec.ts | 29 +++ .../src/app/app.component.ts | 188 ++++++++++++++++++ .../src/app/app.config.server.ts | 14 ++ .../src/app/app.config.ts | 9 + .../src/app/app.routes.server.ts | 8 + .../src/app/app.routes.ts | 3 + .../src/index.html | 13 ++ .../src/main.server.ts | 7 + .../src/main.ts | 6 + .../src/server.ts | 66 ++++++ .../src/styles.css | 11 + .../tsconfig.app.json | 19 ++ .../tsconfig.json | 27 +++ .../tsconfig.spec.json | 15 ++ 22 files changed, 699 insertions(+) create mode 100644 How to/Rotate all pages in the PDF with a single click/.editorconfig create mode 100644 How to/Rotate all pages in the PDF with a single click/.gitignore create mode 100644 How to/Rotate all pages in the PDF with a single click/README.md create mode 100644 How to/Rotate all pages in the PDF with a single click/angular.json create mode 100644 How to/Rotate all pages in the PDF with a single click/package.json create mode 100644 How to/Rotate all pages in the PDF with a single click/public/favicon.ico create mode 100644 How to/Rotate all pages in the PDF with a single click/src/app/app.component.css create mode 100644 How to/Rotate all pages in the PDF with a single click/src/app/app.component.html create mode 100644 How to/Rotate all pages in the PDF with a single click/src/app/app.component.spec.ts create mode 100644 How to/Rotate all pages in the PDF with a single click/src/app/app.component.ts create mode 100644 How to/Rotate all pages in the PDF with a single click/src/app/app.config.server.ts create mode 100644 How to/Rotate all pages in the PDF with a single click/src/app/app.config.ts create mode 100644 How to/Rotate all pages in the PDF with a single click/src/app/app.routes.server.ts create mode 100644 How to/Rotate all pages in the PDF with a single click/src/app/app.routes.ts create mode 100644 How to/Rotate all pages in the PDF with a single click/src/index.html create mode 100644 How to/Rotate all pages in the PDF with a single click/src/main.server.ts create mode 100644 How to/Rotate all pages in the PDF with a single click/src/main.ts create mode 100644 How to/Rotate all pages in the PDF with a single click/src/server.ts create mode 100644 How to/Rotate all pages in the PDF with a single click/src/styles.css create mode 100644 How to/Rotate all pages in the PDF with a single click/tsconfig.app.json create mode 100644 How to/Rotate all pages in the PDF with a single click/tsconfig.json create mode 100644 How to/Rotate all pages in the PDF with a single click/tsconfig.spec.json diff --git a/How to/Rotate all pages in the PDF with a single click/.editorconfig b/How to/Rotate all pages in the PDF with a single click/.editorconfig new file mode 100644 index 0000000..f166060 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/.editorconfig @@ -0,0 +1,17 @@ +# Editor configuration, see https://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.ts] +quote_type = single +ij_typescript_use_double_quotes = false + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/How to/Rotate all pages in the PDF with a single click/.gitignore b/How to/Rotate all pages in the PDF with a single click/.gitignore new file mode 100644 index 0000000..cc7b141 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/.gitignore @@ -0,0 +1,42 @@ +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. + +# Compiled output +/dist +/tmp +/out-tsc +/bazel-out + +# Node +/node_modules +npm-debug.log +yarn-error.log + +# IDEs and editors +.idea/ +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# Visual Studio Code +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +.history/* + +# Miscellaneous +/.angular/cache +.sass-cache/ +/connect.lock +/coverage +/libpeerconnection.log +testem.log +/typings + +# System files +.DS_Store +Thumbs.db diff --git a/How to/Rotate all pages in the PDF with a single click/README.md b/How to/Rotate all pages in the PDF with a single click/README.md new file mode 100644 index 0000000..4766ad2 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/README.md @@ -0,0 +1,59 @@ +# MyApp + +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.15. + +## Development server + +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. + +## Code scaffolding + +Angular CLI includes powerful code scaffolding tools. To generate a new component, run: + +```bash +ng generate component component-name +``` + +For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run: + +```bash +ng generate --help +``` + +## Building + +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. + +## Running unit tests + +To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command: + +```bash +ng test +``` + +## Running end-to-end tests + +For end-to-end (e2e) testing, run: + +```bash +ng e2e +``` + +Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs. + +## Additional Resources + +For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. diff --git a/How to/Rotate all pages in the PDF with a single click/angular.json b/How to/Rotate all pages in the PDF with a single click/angular.json new file mode 100644 index 0000000..273e795 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/angular.json @@ -0,0 +1,104 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "my-app": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:application", + "options": { + "outputPath": "dist/my-app", + "index": "src/index.html", + "browser": "src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "tsconfig.app.json", + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": [ + "src/styles.css" + ], + "scripts": [], + "server": "src/main.server.ts", + "outputMode": "server", + "ssr": { + "entry": "src/server.ts" + } + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kB", + "maximumError": "1MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "4kB", + "maximumError": "8kB" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "my-app:build:production" + }, + "development": { + "buildTarget": "my-app:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n" + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "tsconfig.spec.json", + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + } + } + } + } + }, + "cli": { + "analytics": "00c678c6-17d6-4fa4-bd0b-bc333253ddde" + } +} diff --git a/How to/Rotate all pages in the PDF with a single click/package.json b/How to/Rotate all pages in the PDF with a single click/package.json new file mode 100644 index 0000000..d61e32c --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/package.json @@ -0,0 +1,46 @@ +{ + "name": "my-app", + "version": "0.0.0", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development", + "test": "ng test", + "serve:ssr:my-app": "node dist/my-app/server/server.mjs" + }, + "private": true, + "dependencies": { + "@angular/common": "^19.2.0", + "@angular/compiler": "^19.2.0", + "@angular/core": "^19.2.0", + "@angular/forms": "^19.2.0", + "@angular/platform-browser": "^19.2.0", + "@angular/platform-browser-dynamic": "^19.2.0", + "@angular/platform-server": "^19.2.0", + "@angular/router": "^19.2.0", + "@angular/ssr": "^19.2.15", + "@syncfusion/ej2-angular-pdfviewer": "*", + "@syncfusion/ej2-angular-buttons":"*", + "@syncfusion/ej2-angular-notifications":"*", + "express": "^4.18.2", + "rxjs": "~7.8.0", + "tslib": "^2.3.0", + "zone.js": "~0.15.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^19.2.15", + "@angular/cli": "^19.2.15", + "@angular/compiler-cli": "^19.2.0", + "@types/express": "^4.17.17", + "@types/jasmine": "~5.1.0", + "@types/node": "^18.18.0", + "jasmine-core": "~5.6.0", + "karma": "~6.4.0", + "karma-chrome-launcher": "~3.2.0", + "karma-coverage": "~2.2.0", + "karma-jasmine": "~5.1.0", + "karma-jasmine-html-reporter": "~2.1.0", + "typescript": "~5.7.2" + } +} diff --git a/How to/Rotate all pages in the PDF with a single click/public/favicon.ico b/How to/Rotate all pages in the PDF with a single click/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..57614f9c967596fad0a3989bec2b1deff33034f6 GIT binary patch literal 15086 zcmd^G33O9Omi+`8$@{|M-I6TH3wzF-p5CV8o}7f~KxR60LK+ApEFB<$bcciv%@SmA zV{n>g85YMFFeU*Uvl=i4v)C*qgnb;$GQ=3XTe9{Y%c`mO%su)noNCCQ*@t1WXn|B(hQ7i~ zrUK8|pUkD6#lNo!bt$6)jR!&C?`P5G(`e((P($RaLeq+o0Vd~f11;qB05kdbAOm?r zXv~GYr_sibQO9NGTCdT;+G(!{4Xs@4fPak8#L8PjgJwcs-Mm#nR_Z0s&u?nDX5^~@ z+A6?}g0|=4e_LoE69pPFO`yCD@BCjgKpzMH0O4Xs{Ahc?K3HC5;l=f zg>}alhBXX&);z$E-wai+9TTRtBX-bWYY@cl$@YN#gMd~tM_5lj6W%8ah4;uZ;jP@Q zVbuel1rPA?2@x9Y+u?e`l{Z4ngfG5q5BLH5QsEu4GVpt{KIp1?U)=3+KQ;%7ec8l* zdV=zZgN5>O3G(3L2fqj3;oBbZZw$Ij@`Juz@?+yy#OPw)>#wsTewVgTK9BGt5AbZ&?K&B3GVF&yu?@(Xj3fR3n+ZP0%+wo)D9_xp>Z$`A4 zfV>}NWjO#3lqumR0`gvnffd9Ka}JJMuHS&|55-*mCD#8e^anA<+sFZVaJe7{=p*oX zE_Uv?1>e~ga=seYzh{9P+n5<+7&9}&(kwqSaz;1aD|YM3HBiy<))4~QJSIryyqp| z8nGc(8>3(_nEI4n)n7j(&d4idW1tVLjZ7QbNLXg;LB ziHsS5pXHEjGJZb59KcvS~wv;uZR-+4qEqow`;JCfB*+b^UL^3!?;-^F%yt=VjU|v z39SSqKcRu_NVvz!zJzL0CceJaS6%!(eMshPv_0U5G`~!a#I$qI5Ic(>IONej@aH=f z)($TAT#1I{iCS4f{D2+ApS=$3E7}5=+y(rA9mM#;Cky%b*Gi0KfFA`ofKTzu`AV-9 znW|y@19rrZ*!N2AvDi<_ZeR3O2R{#dh1#3-d%$k${Rx42h+i&GZo5!C^dSL34*AKp z27mTd>k>?V&X;Nl%GZ(>0s`1UN~Hfyj>KPjtnc|)xM@{H_B9rNr~LuH`Gr5_am&Ep zTjZA8hljNj5H1Ipm-uD9rC}U{-vR!eay5&6x6FkfupdpT*84MVwGpdd(}ib)zZ3Ky z7C$pnjc82(W_y_F{PhYj?o!@3__UUvpX)v69aBSzYj3 zdi}YQkKs^SyXyFG2LTRz9{(w}y~!`{EuAaUr6G1M{*%c+kP1olW9z23dSH!G4_HSK zzae-DF$OGR{ofP*!$a(r^5Go>I3SObVI6FLY)N@o<*gl0&kLo-OT{Tl*7nCz>Iq=? zcigIDHtj|H;6sR?or8Wd_a4996GI*CXGU}o;D9`^FM!AT1pBY~?|4h^61BY#_yIfO zKO?E0 zJ{Pc`9rVEI&$xxXu`<5E)&+m(7zX^v0rqofLs&bnQT(1baQkAr^kEsk)15vlzAZ-l z@OO9RF<+IiJ*O@HE256gCt!bF=NM*vh|WVWmjVawcNoksRTMvR03H{p@cjwKh(CL4 z7_PB(dM=kO)!s4fW!1p0f93YN@?ZSG` z$B!JaAJCtW$B97}HNO9(x-t30&E}Mo1UPi@Av%uHj~?T|!4JLwV;KCx8xO#b9IlUW zI6+{a@Wj|<2Y=U;a@vXbxqZNngH8^}LleE_4*0&O7#3iGxfJ%Id>+sb;7{L=aIic8 z|EW|{{S)J-wr@;3PmlxRXU8!e2gm_%s|ReH!reFcY8%$Hl4M5>;6^UDUUae?kOy#h zk~6Ee_@ZAn48Bab__^bNmQ~+k=02jz)e0d9Z3>G?RGG!65?d1>9}7iG17?P*=GUV-#SbLRw)Hu{zx*azHxWkGNTWl@HeWjA?39Ia|sCi{e;!^`1Oec zb>Z|b65OM*;eC=ZLSy?_fg$&^2xI>qSLA2G*$nA3GEnp3$N-)46`|36m*sc#4%C|h zBN<2U;7k>&G_wL4=Ve5z`ubVD&*Hxi)r@{4RCDw7U_D`lbC(9&pG5C*z#W>8>HU)h z!h3g?2UL&sS!oY5$3?VlA0Me9W5e~V;2jds*fz^updz#AJ%G8w2V}AEE?E^=MK%Xt z__Bx1cr7+DQmuHmzn*|hh%~eEc9@m05@clWfpEFcr+06%0&dZJH&@8^&@*$qR@}o3 z@Tuuh2FsLz^zH+dN&T&?0G3I?MpmYJ;GP$J!EzjeM#YLJ!W$}MVNb0^HfOA>5Fe~UNn%Zk(PT@~9}1dt)1UQ zU*B5K?Dl#G74qmg|2>^>0WtLX#Jz{lO4NT`NYB*(L#D|5IpXr9v&7a@YsGp3vLR7L zHYGHZg7{ie6n~2p$6Yz>=^cEg7tEgk-1YRl%-s7^cbqFb(U7&Dp78+&ut5!Tn(hER z|Gp4Ed@CnOPeAe|N>U(dB;SZ?NU^AzoD^UAH_vamp6Ws}{|mSq`^+VP1g~2B{%N-!mWz<`)G)>V-<`9`L4?3dM%Qh6<@kba+m`JS{Ya@9Fq*m6$$ zA1%Ogc~VRH33|S9l%CNb4zM%k^EIpqY}@h{w(aBcJ9c05oiZx#SK9t->5lSI`=&l~ z+-Ic)a{FbBhXV$Xt!WRd`R#Jk-$+_Z52rS>?Vpt2IK<84|E-SBEoIw>cs=a{BlQ7O z-?{Fy_M&84&9|KM5wt~)*!~i~E=(6m8(uCO)I=)M?)&sRbzH$9Rovzd?ZEY}GqX+~ zFbEbLz`BZ49=2Yh-|<`waK-_4!7`ro@zlC|r&I4fc4oyb+m=|c8)8%tZ-z5FwhzDt zL5kB@u53`d@%nHl0Sp)Dw`(QU&>vujEn?GPEXUW!Wi<+4e%BORl&BIH+SwRcbS}X@ z01Pk|vA%OdJKAs17zSXtO55k!;%m9>1eW9LnyAX4uj7@${O6cfii`49qTNItzny5J zH&Gj`e}o}?xjQ}r?LrI%FjUd@xflT3|7LA|ka%Q3i}a8gVm<`HIWoJGH=$EGClX^C0lysQJ>UO(q&;`T#8txuoQ_{l^kEV9CAdXuU1Ghg8 zN_6hHFuy&1x24q5-(Z7;!poYdt*`UTdrQOIQ!2O7_+AHV2hgXaEz7)>$LEdG z<8vE^Tw$|YwZHZDPM!SNOAWG$?J)MdmEk{U!!$M#fp7*Wo}jJ$Q(=8>R`Ats?e|VU?Zt7Cdh%AdnfyN3MBWw{ z$OnREvPf7%z6`#2##_7id|H%Y{vV^vWXb?5d5?a_y&t3@p9t$ncHj-NBdo&X{wrfJ zamN)VMYROYh_SvjJ=Xd!Ga?PY_$;*L=SxFte!4O6%0HEh%iZ4=gvns7IWIyJHa|hT z2;1+e)`TvbNb3-0z&DD_)Jomsg-7p_Uh`wjGnU1urmv1_oVqRg#=C?e?!7DgtqojU zWoAB($&53;TsXu^@2;8M`#z{=rPy?JqgYM0CDf4v@z=ZD|ItJ&8%_7A#K?S{wjxgd z?xA6JdJojrWpB7fr2p_MSsU4(R7=XGS0+Eg#xR=j>`H@R9{XjwBmqAiOxOL` zt?XK-iTEOWV}f>Pz3H-s*>W z4~8C&Xq25UQ^xH6H9kY_RM1$ch+%YLF72AA7^b{~VNTG}Tj#qZltz5Q=qxR`&oIlW Nr__JTFzvMr^FKp4S3v*( literal 0 HcmV?d00001 diff --git a/How to/Rotate all pages in the PDF with a single click/src/app/app.component.css b/How to/Rotate all pages in the PDF with a single click/src/app/app.component.css new file mode 100644 index 0000000..e69de29 diff --git a/How to/Rotate all pages in the PDF with a single click/src/app/app.component.html b/How to/Rotate all pages in the PDF with a single click/src/app/app.component.html new file mode 100644 index 0000000..b67cf65 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/src/app/app.component.html @@ -0,0 +1,16 @@ + +
+ +
diff --git a/How to/Rotate all pages in the PDF with a single click/src/app/app.component.spec.ts b/How to/Rotate all pages in the PDF with a single click/src/app/app.component.spec.ts new file mode 100644 index 0000000..5119ea2 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/src/app/app.component.spec.ts @@ -0,0 +1,29 @@ +import { TestBed } from '@angular/core/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AppComponent], + }).compileComponents(); + }); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); + + it(`should have the 'my-app' title`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('my-app'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('h1')?.textContent).toContain('Hello, my-app'); + }); +}); diff --git a/How to/Rotate all pages in the PDF with a single click/src/app/app.component.ts b/How to/Rotate all pages in the PDF with a single click/src/app/app.component.ts new file mode 100644 index 0000000..59ed5d1 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/src/app/app.component.ts @@ -0,0 +1,188 @@ +import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core'; +import { + PdfViewerComponent, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + AnnotationService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + PdfViewerModule, +} from '@syncfusion/ej2-angular-pdfviewer'; +import { SwitchComponent, SwitchModule } from '@syncfusion/ej2-angular-buttons'; +import { ClickEventArgs } from '@syncfusion/ej2-buttons'; +import { CustomToolbarItemModel } from '@syncfusion/ej2-pdfviewer'; +import { + PdfDocument, + PdfPage, + PdfRotationAngle, + } from '@syncfusion/ej2-pdf'; + +/** + * Default PdfViewer Controller + */ +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + encapsulation: ViewEncapsulation.None, + // tslint:disable-next-line:max-line-length + providers: [ + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + AnnotationService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ], + styleUrls: ['app.component.css'], + standalone: true, + imports: [SwitchModule, PdfViewerModule], +}) +export class AppComponent { + @ViewChild('pdfviewer') + public pdfviewerControl: PdfViewerComponent | undefined; + public currentPageNumber: number | undefined; + + public document: string = + 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public resource: string = + 'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib'; + ngOnInit(): void { + // ngOnInit function + } + public change(e: any): void { + if(this.pdfviewerControl){ + if (e.checked) { + this.pdfviewerControl.serviceUrl = ''; + } else { + this.pdfviewerControl.serviceUrl = + 'https://services.syncfusion.com/angular/production/api/pdfviewer'; + } + this.pdfviewerControl.dataBind(); + this.pdfviewerControl.load(this.pdfviewerControl.documentPath, ""); + } +} +// Custom toolbar item for rotating pages counterclockwise + public toolItem1: CustomToolbarItemModel = { + prefixIcon: 'e-icons e-transform-left', + id: 'rotateCounterclockwise', + tooltipText: 'Custom toolbar item', + }; + // Custom toolbar item for rotating pages clockwise + public toolItem2: CustomToolbarItemModel = { + prefixIcon: 'e-icons e-transform-right', + id: 'rotateClockwise', + tooltipText: 'Custom toolbar item', + }; + // Toolbar configuration including custom rotation buttons + public toolbarSettings = { + showTooltip: true, + toolbarItems: [ + this.toolItem1, + this.toolItem2, + 'OpenOption', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption', + 'UndoRedoTool', + 'AnnotationEditTool', + 'FormDesignerEditTool', + 'CommentTool', + 'SubmitForm', + ], + }; + public toolbarClick(args: any): void { + var pdfViewer = (document.getElementById('pdfViewer')) + .ej2_instances[0]; + var _this = this; + // Rotate all pages clockwise + if (args.item && args.item.id === 'rotateClockwise') { + this.currentPageNumber = pdfViewer.currentPageNumber - 1; + pdfViewer.saveAsBlob().then(function (value: Blob) { + var reader = new FileReader(); + reader.readAsDataURL(value); + reader.onload = () => { + var base64 = (reader.result as any).split('base64,')[1]; + let pdfDocument = new PdfDocument(base64); + for(var i=0; i 4){ + rotation = 0; + } + page.rotation = _this.getPdfRotationAngle(rotation); + } + pdfDocument.saveAsBlob().then((value) => { + var reader = new FileReader(); + reader.readAsDataURL(value.blobData); + reader.onload = () => { + var base64data = reader.result; + pdfViewer.load(base64data); + }; + }); + }; + }); + } + // Rotate all pages counterclockwise + else if (args.item && args.item.id === 'rotateCounterclockwise') { + this.currentPageNumber = pdfViewer.currentPageNumber - 1; + pdfViewer.saveAsBlob().then(function (value: Blob) { + var reader = new FileReader(); + reader.readAsDataURL(value); + reader.onload = () => { + var base64 = (reader.result as any).split('base64,')[1]; + let pdfDocument = new PdfDocument(base64); + for(var i=0; i { + var reader = new FileReader(); + reader.readAsDataURL(value.blobData); + reader.onload = () => { + var base64data = reader.result; + pdfViewer.load(base64data); + }; + }); + }; + }); + } + } + //Converts numeric rotation value to PdfRotationAngle enum. + private getPdfRotationAngle(rotation: number): PdfRotationAngle { + switch (rotation) { + case 0: + return PdfRotationAngle.angle0; + case 1: + return PdfRotationAngle.angle90; + case 2: + return PdfRotationAngle.angle180; + case 3: + return PdfRotationAngle.angle270; + default: + return PdfRotationAngle.angle0; + } + } +} diff --git a/How to/Rotate all pages in the PDF with a single click/src/app/app.config.server.ts b/How to/Rotate all pages in the PDF with a single click/src/app/app.config.server.ts new file mode 100644 index 0000000..0125189 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/src/app/app.config.server.ts @@ -0,0 +1,14 @@ +import { mergeApplicationConfig, ApplicationConfig } from '@angular/core'; +import { provideServerRendering } from '@angular/platform-server'; +import { provideServerRouting } from '@angular/ssr'; +import { appConfig } from './app.config'; +import { serverRoutes } from './app.routes.server'; + +const serverConfig: ApplicationConfig = { + providers: [ + provideServerRendering(), + provideServerRouting(serverRoutes) + ] +}; + +export const config = mergeApplicationConfig(appConfig, serverConfig); diff --git a/How to/Rotate all pages in the PDF with a single click/src/app/app.config.ts b/How to/Rotate all pages in the PDF with a single click/src/app/app.config.ts new file mode 100644 index 0000000..a9af518 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/src/app/app.config.ts @@ -0,0 +1,9 @@ +import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; +import { provideRouter } from '@angular/router'; + +import { routes } from './app.routes'; +import { provideClientHydration, withEventReplay } from '@angular/platform-browser'; + +export const appConfig: ApplicationConfig = { + providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay())] +}; diff --git a/How to/Rotate all pages in the PDF with a single click/src/app/app.routes.server.ts b/How to/Rotate all pages in the PDF with a single click/src/app/app.routes.server.ts new file mode 100644 index 0000000..ffd37b1 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/src/app/app.routes.server.ts @@ -0,0 +1,8 @@ +import { RenderMode, ServerRoute } from '@angular/ssr'; + +export const serverRoutes: ServerRoute[] = [ + { + path: '**', + renderMode: RenderMode.Prerender + } +]; diff --git a/How to/Rotate all pages in the PDF with a single click/src/app/app.routes.ts b/How to/Rotate all pages in the PDF with a single click/src/app/app.routes.ts new file mode 100644 index 0000000..dc39edb --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/src/app/app.routes.ts @@ -0,0 +1,3 @@ +import { Routes } from '@angular/router'; + +export const routes: Routes = []; diff --git a/How to/Rotate all pages in the PDF with a single click/src/index.html b/How to/Rotate all pages in the PDF with a single click/src/index.html new file mode 100644 index 0000000..7fa8cd9 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/src/index.html @@ -0,0 +1,13 @@ + + + + + MyApp + + + + + + + + diff --git a/How to/Rotate all pages in the PDF with a single click/src/main.server.ts b/How to/Rotate all pages in the PDF with a single click/src/main.server.ts new file mode 100644 index 0000000..4b9d4d1 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/src/main.server.ts @@ -0,0 +1,7 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app/app.component'; +import { config } from './app/app.config.server'; + +const bootstrap = () => bootstrapApplication(AppComponent, config); + +export default bootstrap; diff --git a/How to/Rotate all pages in the PDF with a single click/src/main.ts b/How to/Rotate all pages in the PDF with a single click/src/main.ts new file mode 100644 index 0000000..35b00f3 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/src/main.ts @@ -0,0 +1,6 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { appConfig } from './app/app.config'; +import { AppComponent } from './app/app.component'; + +bootstrapApplication(AppComponent, appConfig) + .catch((err) => console.error(err)); diff --git a/How to/Rotate all pages in the PDF with a single click/src/server.ts b/How to/Rotate all pages in the PDF with a single click/src/server.ts new file mode 100644 index 0000000..591b7a6 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/src/server.ts @@ -0,0 +1,66 @@ +import { + AngularNodeAppEngine, + createNodeRequestHandler, + isMainModule, + writeResponseToNodeResponse, +} from '@angular/ssr/node'; +import express from 'express'; +import { dirname, resolve } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const serverDistFolder = dirname(fileURLToPath(import.meta.url)); +const browserDistFolder = resolve(serverDistFolder, '../browser'); + +const app = express(); +const angularApp = new AngularNodeAppEngine(); + +/** + * Example Express Rest API endpoints can be defined here. + * Uncomment and define endpoints as necessary. + * + * Example: + * ```ts + * app.get('/api/**', (req, res) => { + * // Handle API request + * }); + * ``` + */ + +/** + * Serve static files from /browser + */ +app.use( + express.static(browserDistFolder, { + maxAge: '1y', + index: false, + redirect: false, + }), +); + +/** + * Handle all other requests by rendering the Angular application. + */ +app.use('/**', (req, res, next) => { + angularApp + .handle(req) + .then((response) => + response ? writeResponseToNodeResponse(response, res) : next(), + ) + .catch(next); +}); + +/** + * Start the server if this module is the main entry point. + * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000. + */ +if (isMainModule(import.meta.url)) { + const port = process.env['PORT'] || 4000; + app.listen(port, () => { + console.log(`Node Express server listening on http://localhost:${port}`); + }); +} + +/** + * Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions. + */ +export const reqHandler = createNodeRequestHandler(app); diff --git a/How to/Rotate all pages in the PDF with a single click/src/styles.css b/How to/Rotate all pages in the PDF with a single click/src/styles.css new file mode 100644 index 0000000..baf1a1a --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/src/styles.css @@ -0,0 +1,11 @@ +/* You can add global styles to this file, and also import other style files */ +/* You can add global styles to this file, and also import other style files */ +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css'; \ No newline at end of file diff --git a/How to/Rotate all pages in the PDF with a single click/tsconfig.app.json b/How to/Rotate all pages in the PDF with a single click/tsconfig.app.json new file mode 100644 index 0000000..9ab8527 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/tsconfig.app.json @@ -0,0 +1,19 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [ + "node" + ] + }, + "files": [ + "src/main.ts", + "src/main.server.ts", + "src/server.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/How to/Rotate all pages in the PDF with a single click/tsconfig.json b/How to/Rotate all pages in the PDF with a single click/tsconfig.json new file mode 100644 index 0000000..5525117 --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/tsconfig.json @@ -0,0 +1,27 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "compileOnSave": false, + "compilerOptions": { + "outDir": "./dist/out-tsc", + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "skipLibCheck": true, + "isolatedModules": true, + "esModuleInterop": true, + "experimentalDecorators": true, + "moduleResolution": "bundler", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022" + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/How to/Rotate all pages in the PDF with a single click/tsconfig.spec.json b/How to/Rotate all pages in the PDF with a single click/tsconfig.spec.json new file mode 100644 index 0000000..5fb748d --- /dev/null +++ b/How to/Rotate all pages in the PDF with a single click/tsconfig.spec.json @@ -0,0 +1,15 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "include": [ + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +}