PDFViewerProps

Premium

The props of the KendoReact PDF Viewer component.

Name	Type	Default	Description
arrayBuffer?	ArrayBuffer		Represents the raw binary data buffer of the PDF file. jsx <PDFViewer arrayBuffer={new ArrayBuffer(1024)} />
data?	string		Represents the data of the PDF file in Base64 format. jsx <PDFViewer data="JVBERi0xLjQKJ..." />
defaultZoom?	number		Represents the default zoom value. jsx <PDFViewer defaultZoom={1} />
maxZoom?	number		Represents the maximum zoom value. jsx <PDFViewer maxZoom={4} />
minZoom?	number		Represents 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		Represents the file name used to save the file when the user clicks the download tool. jsx <PDFViewer saveFileName="document.pdf" />
saveOptions?	SaveOptions		Represents the options for saving the file when the user clicks the download tool. jsx <PDFViewer saveOptions={{ forceProxy: true }} />
style?	React.CSSProperties		Represents the additional styles which will be added to the PDF Viewer component. jsx <PDFViewer style={{ height: '500px' }} />
tools?	PDFViewerTool[]	['pager', 'spacer', 'zoomInOut', 'zoom', 'selection', 'spacer', 'search', 'open', 'download', 'print']	Represents the tools collection rendered in the toolbar. jsx <PDFViewer tools={['pager', 'zoom']} />
typedArray?	TypedArray		Represents the data of the PDF file in typed array format. jsx <PDFViewer typedArray={new Uint8Array([0x25, 0x50, 0x44, 0x46])} />
url?	string		Represents the URL of the PDF file. jsx <PDFViewer url="https://example.com/sample.pdf" />
zoom?	number		Represents the zoom value of the document. jsx <PDFViewer zoom={1.5} />
zoomLevels?	{ id: number; locationString?: string; priority: number; text: string; type: string; value: number; }[]		Represents the zoom levels populated in the ComboBox component. jsx <PDFViewer zoomLevels={[{ id: 1, value: 1, text: '100%' }]} />
zoomRate?	number		Represents the zoom rate value. jsx <PDFViewer zoomRate={0.25} />