Document Viewer
The DocumentViewer component can preview image (IMG), PDF, and HTML files.
Props
| Props | Description | Type | Default |
|---|---|---|---|
| showToolBar | It shows the area where the page transitions are made on the component. Page transitions are not visible as soon as it is turned off. All pages are displayed on the component. | boolean | true |
| src | The source value for document. May be path or binary. It can also be exported in base64 format. If you want to display image you need to add the file path. | string | 'http:...', 'data:..' |
| scale | Sets the scale size of the component content. | string | ex: '0.2' |
| showPrint | Allows the user to enable the option to print the uploaded document. | boolean | false |
| height | The height of the component (set %100 for fill the parent component size). | string | '50px', '100%', '100vh' |
| tabindex | When the user clicks tab, the next component will be focused according to tabIndex order. | string | undefined |
| visible | hide / show component. | boolean | false |
| pdfToolbarBackgroundColor | Change the background color of the toolbar. | string | ‘#fafafa’ |
| pdfBackgroundColor | Change the background color of the pdf. | string | ‘#eeeeee’ |
| hidePagination | Hides pagination on toolbar. | boolean | false |
| hideDescription | Hides description on toolbar. | boolean | false |
| hideDownload | Hides download icon on toolbar. | boolean | false |
| hideRotate | Hides rotate icon on toolbar. | boolean | false |
| hideZoom | Hides zoom options on toolbar. | boolean | false |
| displayOnScroll | Load and display pages as they scroll down. | boolean | false |
| fileDescription | Definition of the displayed pdf on the toolbar. When the download feature is used, the file is downloaded with the definition here. | string | undefined |
| visible | Visibility of DocumentViewer component . | boolean | true |
Events
| Events | Description |
|---|---|
| scrolledToBottom | A method that listens for post messages from the page on pages loaded as html. |
| scrollEnd | It is triggered as soon as it reaches the end of the page. The height property must be given to trigger it. Ex: ('100vh') |
Methods
| Methods | Description |
|---|---|
| nextPage() | Go to next page while source is pdf. |
| previousPage() | Go to previous page while source is pdf. |
| zoomIn() | Used to increase scale by 10% while source is pdf. |
| zoomOut() | Used to decrease scale by 10% while source is pdf. |
| goToPage(pageNumber:number) | Go to desired page while source is pdf. |
| downloadPdf() | Download the file with given string for 'fileDescription' property while source is pdf. |
| rotate() | Used to rotate the displayed pdf by 90 degrees. |
Usage Scenarios
Using the DocumentViewer is straightforward as it requires only a source (src) prop and an optional height prop (default is 50px). Once you add the component to your interface, you can use it as shown in the examples below:
Pdf
To preview a PDF file, you can define src prop as a byte64 code or a pdf path.
- Byte64
src='data:application/pdf;base64,JVBERi0xLjMNCiXi48/TDQoNCjEgMCBvYmoNCjw8DQovVHlwZSAvQ2F0YWxvZw0KL0...'
- Path
src='https://example.com/sample.pdf'
Html
To preview a HTML file, you can define src prop as a raw html code or a full path of an HTML page.
- Path (should end with .html or .htm)
src='https://example.com/sample.html'
Img
DocumentViewer supports the following image types: jpeg, jpg, gif, png, apng, svg, bmp, ico
When displaying inside a VDialog, the component layout should be as follows:
From outermost to innermost;
VDialog -> VContainer -> VRow -> VCol -> VCard -> DocumentViewer