Load Pages on Demand
The PDFViewer supports loading pages on demand, which is ideal for large PDF files. The feature improves the performance by loading only the necessary pages during initialization, reducing the initial loading time and memory consumption.
The PDFViewer will load the pages as the user scrolls through the document, ensuring a smooth experience without overwhelming the browser with too much data at once.
To enable this functionality, set the loadOnDemand property to true.
You can control the number of pages loaded at a time using the loadOnDemandPageSize property. By default, this property is set to 1, meaning that one page is loaded initially, and the following pages are requested as the user scrolls. Adjust this value to load multiple pages simultaneously if needed.
<kendo-pdfviewer
[loadOnDemand]="true"
[loadOnDemandPageSize]="2">
</kendo-pdfviewer>The following example demonstrates how to load pages on demand in the PDFViewer component.
Deferring the PDF Viewer
Angular's deferrable views let you delay content rendering based on a trigger such as user interaction, a timer, idle browser state, or the element entering the viewport. For the PDFViewer, the on interaction trigger is a practical choice—the browser skips its initialization on load and starts it only when the user interacts with the placeholder.
Wrap the PDFViewer in a @defer (on interaction) block. Use a Skeleton in the @placeholder block to preserve layout, and a Loader in the @loading block to indicate rendering progress.
The following example demonstrates the PDFViewer inside a deferrable view. Click the placeholder to trigger loading.