Angular PDFViewer Blank Page
The Kendo UI for Angular PDFViewer component displays a blank page when no document is loaded. This blank view includes a drop zone that allows users to upload a PDF file by either dragging and dropping it onto the component or by selecting it through a file dialog.
The following example demonstrates the default blank page of the PDFViewer component.
Customizing the Blank Page
The PDFViewer allows you to customize the blank page by providing a custom template using the kendoPdfViewerBlankPageTemplate directive.
<kendo-pdfviewer>
<ng-template kendoPdfViewerBlankPageTemplate>
<!-- Custom blank page content -->
</ng-template>
</kendo-pdfviewer>When you set a blank page template, the PDFViewer renders your content instead of the default drop zone. Use this template to build a custom empty state, add branding, or implement a specialized upload workflow.
The following example demonstrates a custom blank page template that uses a FileSelect component to load a PDF document.
Setting Custom Messages
To change the text shown in the default blank page drop zone, set the messages through the PDFViewerCustomMessagesComponent.
The PDFViewer uses the following blank page message inputs:
blankPageDropFilesHere—Sets the text for the FileSelect drop zone hint when no file is being dragged.blankPageExternalDropFilesHere—Sets the text for the FileSelect external drop zone hint when no file is being dragged.blankPageSelect—Sets the text for the FileSelect button in the blank page drop zone.
The following code snippet shows how to set custom messages for the blank page.
<kendo-pdfviewer>
<kendo-pdfviewer-messages
blankPageDropFilesHere="Drop a PDF here"
blankPageExternalDropFilesHere="Drop to upload"
blankPageSelect="Select a PDF file">
</kendo-pdfviewer-messages>
</kendo-pdfviewer>For a full list of available messages, refer to the PDFViewerCustomMessagesComponent.
Handling Unsupported Files
The PDFViewer emits a fileSelect event when a user selects a file through the blank page drop zone. You can use this event to implement custom file validation logic before the component loads the document.
The following example demonstrates how to handle the fileSelect event to validate the selected file type.
You can use the fileSelect event for other scenarios, such as:
- Enforce file rules, such as maximum size, and show a warning when the file exceeds the limit.
- Route the file through custom logic, such as uploading it to a server, and set the PDFViewer source after the upload completes.
- Track user actions, such as logging file name and size, before the component loads the document.