How to Rotate PDF Pages With Custom Buttons in JavaScript PDF Viewer?
Description:
This article explains how to rotate PDF pages programmatically using custom toolbar buttons in the Syncfusion® JavaScript PDF Viewer. This feature is useful when you want to provide users with intuitive controls for rotating pages without relying on built-in options.
Solution:
You can add custom toolbar buttons to the Syncfusion PDF Viewer and handle their click events to rotate pages clockwise or counterclockwise using the saveAsBlob method and Syncfusion’s PDF processing capabilities.
Prerequisites:
- Syncfusion PDF Viewer Setup: Ensure the Syncfusion PDF Viewer is properly configured in your JavaScript application. If not, refer to the Getting Started guide.
- Basic Knowledge of HTML/CSS: A basic understanding of HTML structure and CSS styling.
Code Snippet:
index.html
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 PDF Viewer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript PDF Viewer Control">
<meta name="author" content="Syncfusion">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-pdfviewer/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-notifications/styles/material.css" rel="stylesheet">
<!-- Essential JS 2 PDF Viewer's script -->
<script src="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="pdfViewer" style="height:500px;width:100%;"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
index.js
var toolItem1 = {
prefixIcon: 'e-icons e-transform-left',
id: 'rotateCounterclockwise',
tooltipText: 'Custom toolbar item',
};
var toolItem2 = {
prefixIcon: 'e-icons e-transform-right',
id: 'rotateClockwise',
tooltipText: 'Custom toolbar item',
};
var viewer = new ej.pdfviewer.PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib',
toolbarSettings: {
toolbarItems: [
toolItem1,
toolItem2,
'OpenOption',
'PageNavigationTool',
'MagnificationTool',
'PanTool',
'SelectionTool',
'SearchOption',
'PrintOption',
'DownloadOption',
'UndoRedoTool',
'AnnotationEditTool',
'FormDesignerEditTool',
'CommentTool',
'SubmitForm',
],
},
});
ej.pdfviewer.PdfViewer.Inject(
ej.pdfviewer.Toolbar,
ej.pdfviewer.Magnification,
ej.pdfviewer.BookmarkView,
ej.pdfviewer.ThumbnailView,
ej.pdfviewer.TextSelection,
ej.pdfviewer.TextSearch,
ej.pdfviewer.Print,
ej.pdfviewer.Navigation,
ej.pdfviewer.LinkAnnotation,
ej.pdfviewer.Annotation,
ej.pdfviewer.FormFields,
ej.pdfviewer.FormDesigner,
ej.pdfviewer.PageOrganizer
);
viewer.appendTo('#pdfViewer');
//Handle toolbar button click events
viewer.toolbarClick = function (args) {
// Rotate Clockwise
if (args.item && args.item.id === 'rotateClockwise') {
viewer.saveAsBlob().then(function (value) {
var reader = new FileReader();
reader.readAsDataURL(value);
reader.onload = () => {
//convert blob to base64 and load into PdfDocument
var base64 = reader.result.split('base64,')[1];
let pdfDocument = new ej.pdf.PdfDocument(base64);
//Get the first page and increment rotation
let page = pdfDocument.getPage(0); // Provide the required page number index here
var rotation = page.rotation + 1;
if (rotation > 4) {
rotation = 0;
}
page.rotation = rotation;
// Save and reload the rotated PDF
pdfDocument.saveAsBlob().then((value) => {
var reader = new FileReader();
reader.readAsDataURL(value.blobData);
reader.onload = () => {
var base64data = reader.result;
console.log(base64data);
viewer.load(base64data);
};
});
};
});
}
// Rotate Counterclockwise
else if (args.item && args.item.id === 'rotateCounterclockwise') {
viewer.saveAsBlob().then(function (value) {
var reader = new FileReader();
reader.readAsDataURL(value);
reader.onload = () => {
// Convert blob to base64 and load into PdfDocument
var base64 = reader.result.split('base64,')[1];
let pdfDocument = new ej.pdf.PdfDocument(base64);
//Get the first page and decrement rotation
let page = pdfDocument.getPage(0); // Provide the required page number index here
var rotation = page.rotation - 1;
if (rotation < 0) {
rotation = 3;
}
page.rotation = rotation;
// Save and reload the rotated PDF
pdfDocument.saveAsBlob().then((value) => {
var reader = new FileReader();
reader.readAsDataURL(value.blobData);
reader.onload = () => {
var base64data = reader.result;
console.log(base64data);
viewer.load(base64data);
};
});
};
});
}
};
Key Features Used in the Code:
- Custom Toolbar Buttons: Two custom buttons are added to rotate pages left and right.
- PDF Page Rotation Logic: The rotation is handled using Syncfusion’s PdfDocument API and modular arithmetic to cycle through rotation states.
- Blob Conversion and Reloading: The modified PDF is converted back to a blob and reloaded into the viewer.
Sample Link:
You can find the full sample in our GitHub repository.
Conclusion:
We hope you enjoyed learning about to rotate PDF pages with custom buttons in the Syncfusion JavaScript PDF Viewer. This approach enhances user experience by offering intuitive page manipulation controls.
You can refer to the JavaScript PDF Viewer feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications.
You can also explore our JavaScript PDF Viewer Examples example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
