Page render initiate and complete events

25 Jun 20261 minute 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.
<ejs-pdfviewer #pdfViewer id="pdfViewer"
               [serviceUrl]='service'
               [documentPath]='document'
               (pageRenderInitiate)='pageRenderInitiate($event)'
               (pageRenderComplete)='pageRenderComplete($event)'
               style="height:640px;display:block">
</ejs-pdfviewer>
public pageRenderInitiate(args: any): void {
  // This method is called when the page rendering starts
  console.log('Rendering of pages started');
  console.log(args)
}

public pageRenderComplete(args: any): void {
  // This method is called when the page rendering completes
 console.log('Rendering of pages completed');
 console.log(args)
}

The provided code demonstrates how to subscribe to the pageRenderInitiate and pageRenderComplete events in the PDF Viewer component.

View sample in GitHub