@progress/kendo-react-pdf-viewer/index.d.mts

KendoReact PDFViewer package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { currentPage } from '@progress/kendo-pdfviewer-common';
import * as React_2 from 'react';
import { SaveOptions } from '@progress/kendo-file-saver';
import { ToolbarProps } from '@progress/kendo-react-buttons';
import { TypedArray } from '@progress/kendo-pdfviewer-common';

export { currentPage }

/**
 * The KendoReact [PDF Viewer]({% slug api_pdf-viewer_pdfviewer %}) DownloadEvent object.
 */
export declare interface DownloadEvent extends PDFViewerEvent {
    /**
     * The Blob object.
     */
    blob: Blob;
    /**
     * Sets the name for saving the file.
     */
    fileName: string;
    /**
     * Sets the options for saving the file.
     */
    saveOptions: SaveOptions;
}

/**
 * The KendoReact [PDF Viewer]({% slug api_pdf-viewer_pdfviewer %}) ErrorEvent object.
 */
declare interface ErrorEvent_2 extends PDFViewerEvent {
    /**
     * The raised error.
     */
    error: Error | {
        message: string;
    };
}
export { ErrorEvent_2 as ErrorEvent }

/**
 * The KendoReact [PDF Viewer]({% slug api_pdf-viewer_pdfviewer %}) LoadEvent object.
 */
export declare interface LoadEvent extends PDFViewerEvent {
}

/**
 * The KendoReact [PDF Viewer]({% slug api_pdf-viewer_pdfviewer %}) PageEvent object.
 */
export declare interface PageEvent extends PDFViewerEvent {
    /**
     * The page number.
     */
    page: number;
    /**
     * A React `SyntheticEvent`.
     */
    syntheticEvent: React_2.SyntheticEvent<any>;
}

/**
 * Represents the [KendoReact PDF Viewer component]({% slug api_pdf-viewer_pdfviewerprops %}).
 *
 * @example
 * ```jsx
 * function App() {
 *  return <PDFViewer url="sample.pdf" />;
 * }
 * ```
 */
export declare const PDFViewer: React_2.ForwardRefExoticComponent<PDFViewerProps & React_2.RefAttributes<PDFViewerHandle | null>>;

declare interface PDFViewerEvent {
    /**
     * The event target object.
     */
    target: PDFViewerHandle;
}

/**
 * Represents the object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom)
 * callback of the [PDF Viewer]({% slug api_pdf-viewer_pdfviewer %}) component.
 */
export declare interface PDFViewerHandle {
    /**
     * The root DOM element of the PDF Viewer component.
     */
    element: HTMLDivElement | null;
    /**
     * The props of the PDF Viewer component.
     */
    props: PDFViewerProps;
    /**
     * The `PDF.js` document loaded in the PDF Viewer component.
     */
    document: any;
    /**
     * The `PDF.js` pages loaded in the PDF Viewer component.
     */
    pages: any[];
}

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

export declare type PDFViewerTool = 'pager' | 'spacer' | 'zoomInOut' | 'zoom' | 'selection' | 'search' | 'open' | 'download' | 'print';

/**
 * Scrolls the PDF Viewer document to the passed page number.
 *
 * @param rootElement The root HTML element of the PDF Viewer component.
 * @param pageNumber The page number.
 *
 * @example
 * ```jsx
 * function App() {
 * const pdfRef = React.useRef(null);
 * const handleClick = () => {
 *   scrollToPage(pdfRef.current.element, 3);
 * };
 * return (
 *   <div>
 *     <Button onClick={handleClick} >
 *       Scroll to Page 3
 *     </Button>
 *     <PDFViewer
 *       ref={pdfRef}
 *     />
 *   </div>
 *   )
 * }
 * ```
 */
export declare const scrollToPage: (rootElement: HTMLElement, pageNumber: number) => void;

/**
 * The KendoReact [PDF Viewer]({% slug api_pdf-viewer_pdfviewer %}) ZoomEvent object.
 */
export declare interface ZoomEvent extends PDFViewerEvent {
    /**
     * The zoom value.
     */
    zoom: number;
    /**
     * A React `SyntheticEvent`.
     */
    syntheticEvent: React_2.SyntheticEvent<any>;
}

export { }