Contact Support
PageRenderInitiate and PageRenderComplete event
17 Mar 20255 minutes to read
In Syncfusion® PDF Viewer, pageRenderInitiate and pageRenderComplete actions are events that occur during the rendering process of PDF documents.
PageRenderInitiate
The pageRenderInitiate event is triggered when the rendering of a page in the PDF document begins. This event provides developers with an opportunity to perform any necessary initialization or setup before the rendering of the page content commences. It can be utilized to prepare resources, set up rendering parameters, or execute any other actions required before the page rendering process starts.
PageRenderComplete
The pageRenderComplete event is triggered when the rendering of a page in the PDF document is completed. This event allows developers to perform cleanup tasks or finalize rendering-related processes after the rendering of the page content finishes. It can be used to release resources, finalize rendering settings, or handle any post-rendering tasks necessary for the application.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
let pdfviewer;
function App() {
function pageRenderInitiate(args){
// This method is called when the page rendering starts
console.log('Rendering of pages started');
console.log(args);
};
function pageRenderComplete(args){
// This method is called when the page rendering completes
console.log('Rendering of pages completed');
console.log(args);
};
return (<div>
<div className='control-section'>
{/* Render the PDF Viewer */}
<PdfViewerComponent
ref={(scope) => { pdfviewer = scope; }}
id="container"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib"
pageRenderInitiate={pageRenderInitiate}
pageRenderComplete={pageRenderComplete}
style={{ 'height': '640px' }}>
<Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, Annotation,
BookmarkView, ThumbnailView, Print, TextSelection, TextSearch]} />
</PdfViewerComponent>
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
let pdfviewer;
function App() {
function pageRenderInitiate(args){
// This method is called when the page rendering starts
console.log('Rendering of pages started');
console.log(args);
};
function pageRenderComplete(args){
// This method is called when the page rendering completes
console.log('Rendering of pages completed');
console.log(args);
};
return (<div>
<div className='control-section'>
{/* Render the PDF Viewer */}
<PdfViewerComponent
ref={(scope) => { pdfviewer = scope; }}
id="container"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
serviceUrl="https://services.syncfusion.com/react/production/api/pdfviewer"
pageRenderInitiate={pageRenderInitiate}
pageRenderComplete={pageRenderComplete}
style={{ 'height': '640px' }}>
<Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, Annotation,
BookmarkView, ThumbnailView, Print, TextSelection, TextSearch]} />
</PdfViewerComponent>
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);The provided code demonstrates how to subscribe to the pageRenderStart and pageRenderComplete events in the Syncfusion® PDF Viewer component.