New to KendoReact? Start a free 30-day trial

PDFViewerProps

Interface

The props of the KendoReact PDF Viewer component.

Definition

Package:@progress/kendo-react-pdf-viewer

Properties

arrayBuffer?

ArrayBuffer

Sets the raw binary data buffer of the PDF file.

Example:

jsx

<PDFViewer arrayBuffer={new ArrayBuffer(1024)} />

data?

string

Sets the data of the PDF file in Base64 format.

Example:

jsx

<PDFViewer data="JVBERi0xLjQKJ..." />

defaultZoom?

number

Sets the default zoom value.

Default:

Example:

jsx

<PDFViewer defaultZoom={1} />

maxZoom?

number

Sets the maximum zoom value.

Default:

Example:

jsx

<PDFViewer maxZoom={4} />

minZoom?

number

Sets the minimum zoom value.

Default:

0.5

Example:

jsx

<PDFViewer minZoom={0.5} />

onDownload?

Fires when the download tool has been clicked. To prevent the download, return false.

Parameters:eventDownloadEventReturns:

boolean | void

Example:

jsx

<PDFViewer onDownload={(event) => console.log(event.fileName)} />

onError?

(event: ErrorEvent) => void

Fires when an error occurs.

Parameters:eventErrorEvent

Example:

jsx

<PDFViewer onError={(event) => console.log(event.error)} />

onLoad?

(event: LoadEvent) => void

Fires when a PDF document has been loaded.

Parameters:eventLoadEvent

Example:

jsx

<PDFViewer onLoad={() => console.log('Document loaded')} />

onPageChange?

(event: PageEvent) => void

Fires when the page has changed.

Parameters:eventPageEvent

Example:

jsx

<PDFViewer onPageChange={(event) => console.log(event.page)} />

onRenderContent?

Fires when the content component is about to be rendered. Use it to override the default appearance of the content.

Parameters:defaultRenderingReactElement<HTMLDivElement, string | JSXElementConstructor<any>>Returns:

ReactNode

Example:

jsx

<PDFViewer onRenderContent={(defaultRendering) => <CustomContent />} />

onRenderLoader?

Fires when the loading indication component is about to be rendered. Use it to override the default appearance of the loading.

Parameters:defaultRenderingnull | ReactElement<HTMLDivElement, string | JSXElementConstructor<any>>Returns:

ReactNode

Example:

jsx

<PDFViewer onRenderLoader={(defaultRendering) => <CustomLoader />} />

onRenderToolbar?

Fires when the toolbar component is about to be rendered. Use it to override the default appearance of the toolbar.

Parameters:defaultRenderingReactElement<ToolbarProps, string | JSXElementConstructor<any>>Returns:

ReactNode

Example:

jsx

<PDFViewer onRenderToolbar={(defaultRendering) => <CustomToolbar />} />

onZoom?

(event: ZoomEvent) => void

Fires when the zoom has changed.

Parameters:eventZoomEvent

Example:

jsx

<PDFViewer onZoom={(event) => console.log(event.zoom)} />

saveFileName?

string

Sets the file name used to save the file when you click the download tool.

Example:

jsx

<PDFViewer saveFileName="document.pdf" />

saveOptions?

SaveOptions

Sets the options for saving the file when you click the download tool.

Example:

jsx

<PDFViewer saveOptions={{ forceProxy: true }} />

style?

CSSProperties

Sets the additional styles for the PDF Viewer component.

Example:

jsx

<PDFViewer style={{ height: '500px' }} />

tools?

PDFViewerTool[]

Sets the tools collection that renders in the toolbar.

Default:

['pager', 'spacer', 'zoomInOut', 'zoom', 'selection', 'spacer', 'search', 'open', 'download', 'print']

Example:

jsx

<PDFViewer tools={['pager', 'zoom']} />

typedArray?

TypedArray

Sets the data of the PDF file in typed array format.

Example:

jsx

<PDFViewer typedArray={new Uint8Array([0x25, 0x50, 0x44, 0x46])} />

url?

string

Sets the URL of the PDF file.

Example:

jsx

<PDFViewer url="https://example.com/sample.pdf" />

zoom?

number

Sets the zoom value of the document.

Example:

jsx

<PDFViewer zoom={1.5} />

zoomLevels?

{ id: number; priority: number; value: number; text: string; type: string; locationString?: string }[]

Sets the zoom levels populated in the ComboBox component.

Example:

jsx

<PDFViewer zoomLevels={[{ id: 1, value: 1, text: '100%' }]} />

zoomRate?

number

Sets the zoom rate value.

Default:

0.25

Example:

jsx

<PDFViewer zoomRate={0.25} />