PDFViewerProps

Premium

The props of the KendoReact PDF Viewer component.

Name	Type	Default	Description
arrayBuffer?	ArrayBuffer		Sets the raw binary data buffer of the PDF file. jsx <PDFViewer arrayBuffer={new ArrayBuffer(1024)} />
data?	string		Sets the data of the PDF file in Base64 format. jsx <PDFViewer data="JVBERi0xLjQKJ..." />
defaultZoom?	number	1	Sets the default zoom value. jsx <PDFViewer defaultZoom={1} />
maxZoom?	number	4	Sets the maximum zoom value. jsx <PDFViewer maxZoom={4} />
minZoom?	number	0.5	Sets the minimum zoom value. jsx <PDFViewer minZoom={0.5} />
onDownload?	(event: DownloadEvent) => boolean | void		Fires when the download tool has been clicked. To prevent the download, return false. jsx <PDFViewer onDownload={(event) => console.log(event.fileName)} />
onError?	(event: ErrorEvent) => void		Fires when an error occurs. jsx <PDFViewer onError={(event) => console.log(event.error)} />
onLoad?	(event: LoadEvent) => void		Fires when a PDF document has been loaded. jsx <PDFViewer onLoad={() => console.log('Document loaded')} />
onPageChange?	(event: PageEvent) => void		Fires when the page has changed. jsx <PDFViewer onPageChange={(event) => console.log(event.page)} />
onRenderContent?	(defaultRendering: ReactElement<HTMLDivElement>) => ReactNode		Fires when the content component is about to be rendered. Use it to override the default appearance of the content. jsx <PDFViewer onRenderContent={(defaultRendering) => <CustomContent />} />
onRenderLoader?	(defaultRendering: "null" | ReactElement<HTMLDivElement>) => ReactNode		Fires when the loading indication component is about to be rendered. Use it to override the default appearance of the loading. jsx <PDFViewer onRenderLoader={(defaultRendering) => <CustomLoader />} />
onRenderToolbar?	(defaultRendering: ReactElement<ToolbarProps>) => ReactNode		Fires when the toolbar component is about to be rendered. Use it to override the default appearance of the toolbar. jsx <PDFViewer onRenderToolbar={(defaultRendering) => <CustomToolbar />} />
onZoom?	(event: ZoomEvent) => void		Fires when the zoom has changed. 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. jsx <PDFViewer saveFileName="document.pdf" />
saveOptions?	SaveOptions		Sets the options for saving the file when you click the download tool. jsx <PDFViewer saveOptions={{ forceProxy: true }} />
style?	React.CSSProperties		Sets the additional styles for the PDF Viewer component. jsx <PDFViewer style={{ height: '500px' }} />
tools?	PDFViewerTool[]	['pager', 'spacer', 'zoomInOut', 'zoom', 'selection', 'spacer', 'search', 'open', 'download', 'print']	Sets the tools collection that renders in the toolbar. jsx <PDFViewer tools={['pager', 'zoom']} />
typedArray?	TypedArray		Sets the data of the PDF file in typed array format. jsx <PDFViewer typedArray={new Uint8Array([0x25, 0x50, 0x44, 0x46])} />
url?	string		Sets the URL of the PDF file. jsx <PDFViewer url="https://example.com/sample.pdf" />
zoom?	number		Sets the zoom value of the document. jsx <PDFViewer zoom={1.5} />
zoomLevels?	{ id: number; locationString?: string; priority: number; text: string; type: string; value: number; }[]		Sets the zoom levels populated in the ComboBox component. jsx <PDFViewer zoomLevels={[{ id: 1, value: 1, text: '100%' }]} />
zoomRate?	number	0.25	Sets the zoom rate value. jsx <PDFViewer zoomRate={0.25} />