Skip to content

Commit 96b9136

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
940461: Sample on How to Rotate PDF pages programmatically using a custom toolbar button
1 parent 259ae22 commit 96b9136

File tree

2 files changed

+150
-0
lines changed

2 files changed

+150
-0
lines changed

‎How to/Rotate PDF pages programmatically using a custom toolbar button/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html><html lang="en"><head>
2+
<title>EJ2 PDF Viewer</title>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="description" content="Typescript PDF Viewer Control">
6+
<meta name="author" content="Syncfusion">
7+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
8+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-pdfviewer/styles/material.css" rel="stylesheet">
9+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
10+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet">
11+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-navigations/styles/material.css" rel="stylesheet">
12+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-dropdowns/styles/material.css" rel="stylesheet">
13+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-lists/styles/material.css" rel="stylesheet">
14+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css" rel="stylesheet">
15+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-splitbuttons/styles/material.css" rel="stylesheet">
16+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-notifications/styles/material.css" rel="stylesheet">
17+
18+
19+
<!-- Essential JS 2 PDF Viewer's script -->
20+
<script src="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2.min.js" type="text/javascript"></script>
21+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
22+
23+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
24+
</head>
25+
<body>
26+
<div id="container">
27+
<div id="pdfViewer" style="height:500px;width:100%;"></div>
28+
</div>
29+
30+
31+
<script>
32+
var ele = document.getElementById('container');
33+
if(ele) {
34+
ele.style.visibility = "visible";
35+
}
36+
</script>
37+
<script src="index.js" type="text/javascript"></script>
38+
</body></html>

‎How to/Rotate PDF pages programmatically using a custom toolbar button/index.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
// Render the PDF viewer control
2+
var toolItem1 = {
3+
prefixIcon: 'e-icons e-transform-left',
4+
id: 'rotateCounterclockwise',
5+
tooltipText: 'Custom toolbar item',
6+
};
7+
var toolItem2 = {
8+
prefixIcon: 'e-icons e-transform-right',
9+
id: 'rotateClockwise',
10+
tooltipText: 'Custom toolbar item',
11+
};
12+
var viewer = new ej.pdfviewer.PdfViewer({
13+
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
14+
resourceUrl: 'https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib',
15+
toolbarSettings: {
16+
toolbarItems: [
17+
toolItem1,
18+
toolItem2,
19+
'OpenOption',
20+
'PageNavigationTool',
21+
'MagnificationTool',
22+
'PanTool',
23+
'SelectionTool',
24+
'SearchOption',
25+
'PrintOption',
26+
'DownloadOption',
27+
'UndoRedoTool',
28+
'AnnotationEditTool',
29+
'FormDesignerEditTool',
30+
'CommentTool',
31+
'SubmitForm',
32+
],
33+
},
34+
});
35+
ej.pdfviewer.PdfViewer.Inject(
36+
ej.pdfviewer.Toolbar,
37+
ej.pdfviewer.Magnification,
38+
ej.pdfviewer.BookmarkView,
39+
ej.pdfviewer.ThumbnailView,
40+
ej.pdfviewer.TextSelection,
41+
ej.pdfviewer.TextSearch,
42+
ej.pdfviewer.Print,
43+
ej.pdfviewer.Navigation,
44+
ej.pdfviewer.LinkAnnotation,
45+
ej.pdfviewer.Annotation,
46+
ej.pdfviewer.FormFields,
47+
ej.pdfviewer.FormDesigner,
48+
ej.pdfviewer.PageOrganizer
49+
);
50+
51+
viewer.appendTo('#pdfViewer');
52+
//Handle toolbar button click events
53+
viewer.toolbarClick = function (args) {
54+
// Rotate Clockwise
55+
if (args.item && args.item.id === 'rotateClockwise') {
56+
viewer.saveAsBlob().then(function (value) {
57+
var reader = new FileReader();
58+
reader.readAsDataURL(value);
59+
reader.onload = () => {
60+
//convert blob to base64 and load into PdfDocument
61+
var base64 = reader.result.split('base64,')[1];
62+
let pdfDocument = new ej.pdf.PdfDocument(base64);
63+
//Get the first page and increment rotation
64+
let page = pdfDocument.getPage(0); // Provide the required page number index here
65+
var rotation = page.rotation + 1;
66+
if (rotation > 4) {
67+
rotation = 0;
68+
}
69+
page.rotation = rotation;
70+
// Save and reload the rotated PDF
71+
pdfDocument.saveAsBlob().then((value) => {
72+
var reader = new FileReader();
73+
reader.readAsDataURL(value.blobData);
74+
reader.onload = () => {
75+
var base64data = reader.result;
76+
console.log(base64data);
77+
viewer.load(base64data);
78+
};
79+
});
80+
};
81+
});
82+
}
83+
// Rotate Counterclockwise
84+
else if (args.item && args.item.id === 'rotateCounterclockwise') {
85+
viewer.saveAsBlob().then(function (value) {
86+
var reader = new FileReader();
87+
reader.readAsDataURL(value);
88+
reader.onload = () => {
89+
// Convert blob to base64 and load into PdfDocument
90+
var base64 = reader.result.split('base64,')[1];
91+
let pdfDocument = new ej.pdf.PdfDocument(base64);
92+
//Get the first page and decrement rotation
93+
let page = pdfDocument.getPage(0); // Provide the required page number index here
94+
var rotation = page.rotation - 1;
95+
if (rotation < 0) {
96+
rotation = 3;
97+
}
98+
page.rotation = rotation;
99+
// Save and reload the rotated PDF
100+
pdfDocument.saveAsBlob().then((value) => {
101+
var reader = new FileReader();
102+
reader.readAsDataURL(value.blobData);
103+
reader.onload = () => {
104+
var base64data = reader.result;
105+
console.log(base64data);
106+
viewer.load(base64data);
107+
};
108+
});
109+
};
110+
});
111+
}
112+
};

0 commit comments

Comments
 (0)