How to Handle Page Render Events in React PDF Viewer

14 Aug 20265 minutes to read

In the PDF Viewer, the pageRenderInitiate and pageRenderComplete events fire during the page rendering life cycle:

  • pageRenderInitiate: fired when the rendering of a page begins. Use this event to initialize resources, show loading indicators, or set up rendering parameters before the page content is drawn.
  • pageRenderComplete: fired when the rendering of a page finishes. Use this event to hide loading indicators, record render timing, or run post-render processing.
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 event handler is called when the page rendering starts
        console.log('Rendering of pages started');
        console.log(args);
    };
    function pageRenderComplete(args){
      // This event handler 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/31.2.2/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 event handler is called when the page rendering starts
        console.log('Rendering of pages started');
        console.log(args);
    };
    function pageRenderComplete(args){
      // This event handler 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://document.syncfusion.com/web-services/pdf-viewer/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.

The following code demonstrates how to subscribe to these events in the Syncfusion PDF Viewer component.