@progress/kendo-react-pdf-viewer 5.10.0-dev.202211241147

package/dist/es/utils.d.ts

@@ -0,0 +1,78 @@
+import { SaveOptions } from '@progress/kendo-file-saver';
+import { PDFPageProxy, PDFDocumentProxy } from 'pdfjs-dist';
+import { TypedArray } from 'pdfjs-dist/types/src/display/api';
+/**
+ * @hidden
+ */
+export declare type DoneFn = (result: {
+    pdfPages: PDFPageProxy[];
+    pdfDoc: PDFDocumentProxy;
+}) => void;
+/**
+ * @hidden
+ */
+export declare type ErrorFn = (e?: any) => void;
+/**
+ * @hidden
+ */
+export interface PDFReadParameters {
+    url?: string;
+    data?: string;
+    arrayBuffer?: ArrayBuffer;
+    typedArray?: TypedArray;
+    error: ErrorFn;
+}
+/**
+ * @hidden
+ */
+export interface PDFReadOptions extends PDFReadParameters {
+    dom: HTMLDivElement;
+    zoom: number;
+    done: DoneFn;
+}
+/**
+ * @hidden
+ */
+export interface PDFReloadParameters {
+    pdfDoc: PDFDocumentProxy;
+    zoom: number;
+    dom: HTMLElement;
+    done: (pdfPages: PDFPageProxy[]) => void;
+    error: ErrorFn;
+}
+/**
+ * @hidden
+ */
+export declare const DEFAULT_ZOOM_LEVEL = 1.25;
+/**
+ * @hidden
+ */
+export declare const download: (options: PDFReadParameters, fileName: string | undefined, saveOptions: SaveOptions | undefined, onDownload: (blob: Blob, fileName: string, saveOptions: SaveOptions) => boolean) => void;
+/**
+ * @hidden
+ */
+export declare const loadPDF: (options: PDFReadOptions) => void;
+/**
+ * @hidden
+ */
+export declare const reloadDocument: (params: PDFReloadParameters) => void;
+/**
+ * @hidden
+ */
+export declare const print: (pages: PDFPageProxy[], done: () => void, error: ErrorFn) => void;
+/**
+ * @hidden
+ */
+export declare const goToNextSearchMatch: (ref: any) => void;
+/**
+ * @hidden
+ */
+export declare const goToPreviousSearchMatch: (ref: any) => void;
+/**
+ * @hidden
+ */
+export declare const calculateZoomLevel: (zoomLevel: number, zoomLevelType: string, currentZoom: number, dom: HTMLDivElement) => number;
+/**
+ * @hidden
+ */
+export declare const removeChildren: (dom: HTMLElement) => void;

package/dist/es/utils.js

@@ -0,0 +1,240 @@
+import { saveAs } from '@progress/kendo-file-saver';
+import { getDocument, renderTextLayer } from 'pdfjs-dist';
+/**
+ * @hidden
+ */
+export const DEFAULT_ZOOM_LEVEL = 1.25;
+const parsePdfFromBase64String = (base64String) => {
+    return atob(base64String.replace(/^(data:application\/pdf;base64,)/ig, ''));
+};
+const getDocumentParameters = (options) => {
+    let params = { verbosity: 0 };
+    if (typeof options.data === 'string') {
+        params.data = parsePdfFromBase64String(options.data);
+    }
+    else if (typeof options.url === 'string') {
+        params.url = options.url;
+    }
+    else if (options.arrayBuffer instanceof ArrayBuffer) {
+        params = options.arrayBuffer;
+    }
+    else if (options.typedArray) {
+        params = options.typedArray;
+    }
+    return params;
+};
+/**
+ * @hidden
+ */
+export const download = (options, fileName = 'Document', saveOptions = {}, onDownload) => {
+    const params = getDocumentParameters(options);
+    getDocument(params).promise
+        .then((pdf) => pdf.getData())
+        .then((data) => new Blob([data], { type: 'application/pdf' }))
+        .then((blob) => {
+        if (!onDownload(blob, fileName, saveOptions)) {
+            saveAs(blob, fileName, saveOptions);
+        }
+    })
+        .catch((reason) => { options.error(reason); });
+};
+/**
+ * @hidden
+ */
+export const loadPDF = (options) => {
+    const params = getDocumentParameters(options);
+    const { dom, zoom, done, error } = options;
+    getDocument(params).promise.then((pdfDoc) => {
+        const pages = [];
+        for (let i = 1; i <= pdfDoc.numPages; i++) {
+            pages.push(pdfDoc.getPage(i));
+        }
+        return { pages, pdfDoc };
+    }).then(({ pages, pdfDoc }) => {
+        Promise.all(pages)
+            .then(all => all.map(page => {
+            dom.appendChild(renderPage(page, zoom, error));
+            return page;
+        }))
+            .then((pdfPages) => {
+            done({ pdfPages, pdfDoc });
+        }).catch((reason) => { options.error(reason); });
+    }).catch((reason) => { options.error(reason); });
+};
+/**
+ * @hidden
+ */
+export const reloadDocument = (params) => {
+    const { pdfDoc, zoom, dom, done, error } = params;
+    const pages = [];
+    for (let i = 1; i <= pdfDoc.numPages; i++) {
+        pages.push(pdfDoc.getPage(i));
+    }
+    Promise.all(pages)
+        .then(all => all.map(page => {
+        dom.appendChild(renderPage(page, zoom, error));
+        return page;
+    }))
+        .then(done)
+        .catch(error);
+};
+/**
+ * @hidden
+ */
+export const print = (pages, done, error) => {
+    const dom = document.createElement('div');
+    let dones = pages.map(() => false);
+    pages.forEach((page, index) => {
+        const viewport = renderCanvas(page, (el) => {
+            dom.appendChild(el);
+            dones[index] = true;
+            if (dones.every(Boolean)) {
+                openPrintDialog(dom, viewport.width, viewport.height, done, error);
+            }
+        }, error);
+    });
+};
+const openPrintDialog = (dom, width, height, done, onError) => {
+    const printDialog = window.open('', '', 'innerWidth=' + width + ',innerHeight=' + height + 'location=no,titlebar=no,toolbar=no');
+    if (!printDialog || !printDialog.document) {
+        onError();
+        return;
+    }
+    if (printDialog) {
+        printDialog.document.body.appendChild(dom);
+        printDialog.focus();
+        setTimeout(() => {
+            printDialog.print();
+            done();
+        }, 0);
+        const onAfterPrint = () => {
+            printDialog.removeEventListener('afterprint', onAfterPrint);
+            printDialog.close();
+        };
+        printDialog.addEventListener('afterprint', onAfterPrint);
+    }
+};
+const renderCanvas = (page, done, error) => {
+    const viewport = page.getViewport({ scale: DEFAULT_ZOOM_LEVEL });
+    const styles = {};
+    const pageElement = createElement('div', '', styles);
+    const canvas = createElement('canvas', '', { width: '100%', height: '100%' });
+    const canvasContext = canvas.getContext('2d');
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+    pageElement.appendChild(canvas);
+    page.render({ canvasContext, viewport }).promise.then(() => {
+        const printContent = new Image();
+        printContent.src = canvas.toDataURL();
+        pageElement.removeChild(canvas);
+        pageElement.appendChild(printContent);
+        printContent.width = canvas.width;
+        printContent.height = canvas.height;
+        const onload = () => {
+            printContent.removeEventListener('load', onload);
+            done(pageElement);
+        };
+        printContent.addEventListener('load', onload);
+    }).catch(error);
+    return viewport;
+};
+const createElement = function (name, className, styles) {
+    const element = document.createElement(name);
+    if (className) {
+        element.className = className;
+    }
+    Object.keys(styles).forEach(key => element.style[key] = styles[key]);
+    return element;
+};
+const renderPage = (page, zoom, error) => {
+    const viewport = page.getViewport({ scale: zoom });
+    const styles = { width: viewport.width + 'px', height: viewport.height + 'px' };
+    const pageElement = createElement('div', 'k-page', styles);
+    const canvas = createElement('canvas', '', { width: '100%', height: '100%' });
+    const canvasContext = canvas.getContext('2d');
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+    pageElement.appendChild(canvas);
+    page.render({ canvasContext, viewport }).promise.then(() => {
+        page.getTextContent().then((textContent) => {
+            const textLayer = createElement('div', 'k-text-layer', styles);
+            renderTextLayer({
+                textContent: textContent,
+                container: textLayer,
+                viewport: viewport,
+                textDivs: []
+            }).promise.then(() => {
+                pageElement.appendChild(textLayer);
+            }).catch(error);
+        });
+    }).catch(error);
+    return pageElement;
+};
+const searchMatchScrollLeftOffset = 0;
+const searchMatchScrollTopOffset = -64;
+const scrollToSearchMatch = (matchElement, ref) => {
+    if (!matchElement) {
+        return;
+    }
+    const closestCharElement = matchElement.closest('.k-text-char');
+    const closestTextElement = closestCharElement ?
+        closestCharElement.closest('span[role=\'presentation\']') :
+        null;
+    if (!closestTextElement) {
+        return;
+    }
+    const closestPageElement = closestTextElement.closest('.k-page');
+    if (!closestPageElement) {
+        return;
+    }
+    const scrollLeft = closestPageElement.offsetLeft +
+        (-1) * ref.scroller.element.offsetLeft +
+        closestTextElement.offsetLeft + searchMatchScrollLeftOffset;
+    const scrollTop = closestPageElement.offsetTop +
+        (-1) * ref.scroller.element.offsetTop +
+        closestTextElement.offsetTop + searchMatchScrollTopOffset;
+    ref.scroller.scrollTo(scrollLeft, scrollTop, { trackScrollEvent: false });
+};
+/**
+ * @hidden
+ */
+export const goToNextSearchMatch = (ref) => {
+    ref.search.markNextMatch();
+    const matchElement = ref.search.getActiveMatchElement();
+    scrollToSearchMatch(matchElement, ref);
+};
+/**
+ * @hidden
+ */
+export const goToPreviousSearchMatch = (ref) => {
+    ref.search.markPreviousMatch();
+    const matchElement = ref.search.getActiveMatchElement();
+    scrollToSearchMatch(matchElement, ref);
+};
+/**
+ * @hidden
+ */
+export const calculateZoomLevel = (zoomLevel, zoomLevelType, currentZoom, dom) => {
+    const documentContainer = dom.closest('.k-pdf-viewer-canvas');
+    const page = dom.querySelector('.k-page');
+    const pageSize = { width: page.offsetWidth, height: page.offsetHeight };
+    let calculatedZoomLevel = zoomLevel;
+    if (zoomLevelType === 'ActualWidth') {
+        calculatedZoomLevel = 1;
+    }
+    else if (zoomLevelType === 'FitToWidth') {
+        calculatedZoomLevel = (documentContainer.offsetWidth / (pageSize.width / currentZoom));
+    }
+    else if (zoomLevelType === 'FitToPage') {
+        calculatedZoomLevel = (documentContainer.offsetHeight / (pageSize.height / currentZoom));
+    }
+    return calculatedZoomLevel;
+};
+/**
+ * @hidden
+ */
+export const removeChildren = (dom) => {
+    while (dom.firstChild) {
+        dom.removeChild(dom.firstChild);
+    }
+};

package/dist/npm/PDFViewer.d.ts

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { Toolbar } from '@progress/kendo-react-buttons';
+import { SaveOptions } from '@progress/kendo-file-saver';
+import { TypedArray } from 'pdfjs-dist/types/src/display/api';
+import 'pdfjs-dist/build/pdf.worker.entry';
+interface PDFViewerEvent {
+    /**
+     * The event target object.
+     */
+    target: PDFViewerHandle;
+}
+/**
+ * The KendoReact [PDFViewer]({% slug api_pdf-viewer_pdfviewer %}) ErrorEvent object.
+ */
+export interface ErrorEvent extends PDFViewerEvent {
+    /**
+     * The raised error.
+     */
+    error: Error | {
+        message: string;
+    };
+}
+/**
+ * The KendoReact [PDFViewer]({% slug api_pdf-viewer_pdfviewer %}) DownloadEvent object.
+ */
+export interface DownloadEvent extends PDFViewerEvent {
+    /**
+     * The Blob object.
+     */
+    blob: Blob;
+    /**
+     * The name which will be used for saving the file.
+     */
+    fileName: string;
+    /**
+     * The options which will be used for saving the file.
+     */
+    saveOptions: SaveOptions;
+}
+/**
+ * The KendoReact [PDFViewer]({% slug api_pdf-viewer_pdfviewer %}) LoadEvent object.
+ */
+export interface LoadEvent extends PDFViewerEvent {
+}
+/**
+ * The props of the KendoReact [PDFViewer]({% slug api_pdf-viewer_pdfviewer %}) component.
+ */
+export interface PDFViewerProps {
+    /**
+     * Represents the url of the PDF file.
+     */
+    url?: string;
+    /**
+     * Represents the data of the PDF file in Base64 format.
+     */
+    data?: string;
+    /**
+     * Represents the raw binary data buffer of the PDF file.
+     */
+    arrayBuffer?: ArrayBuffer;
+    /**
+     * Represents the data of the PDF file in typed array format.
+     */
+    typedArray?: TypedArray;
+    /**
+     * Represents the additional styles which will be added to the PDFViewer component.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Represents the file name used to save the file when the user clicks the download tool.
+     */
+    saveFileName?: string;
+    /**
+     * Represents the options for saving the file when the user clicks the download tool.
+     */
+    saveOptions?: SaveOptions;
+    /**
+     * Represents the zoom levels populated in the ComboBox component.
+     */
+    zoomLevels?: {
+        id: number;
+        value: number;
+        text: string;
+        type: string;
+        locationString?: string;
+    }[];
+    /**
+     * Fires when an error occurs.
+     */
+    onError?: (event: ErrorEvent) => void;
+    /**
+     * Fires when a PDF document has been loaded.
+     */
+    onLoad?: (event: LoadEvent) => void;
+    /**
+     * Fires when the download tool has been clicked. To prevent the download, return `false`.
+     */
+    onDownload?: (event: DownloadEvent) => boolean;
+    /**
+     * Fires when the toolbar component is about to be rendered. Use it to override the default appearance of the toolbar.
+     */
+    onRenderToolbar?: (defaultRendering: React.ReactElement<Toolbar>) => React.ReactNode;
+    /**
+     * Fires when the content component is about to be rendered. Use it to override the default appearance of the content.
+     */
+    onRenderContent?: (defaultRendering: React.ReactElement<HTMLDivElement>) => React.ReactNode;
+    /**
+     * Fires when the loading indication component is about to be rendered. Use it to override the default appearance of the loading.
+     */
+    onRenderLoader?: (defaultRendering: React.ReactElement<HTMLDivElement> | null) => React.ReactNode;
+}
+/**
+ * Represents the object which is passed to the [`ref`](https://reactjs.org/docs/refs-and-the-dom.html)
+ * callback of the [PDFViewer]({% slug api_pdf-viewer_pdfviewer %}) component.
+ */
+export interface PDFViewerHandle {
+    /**
+     * The root DOM element of the PDFViewer component.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props of the PDFViewer component.
+     */
+    props: PDFViewerProps;
+    /**
+     * The `PDF.js` document loaded in the PDFViewer component.
+     */
+    document: any;
+    /**
+     * The `PDF.js` pages loaded in the PDFViewer component.
+     */
+    pages: any[];
+}
+/**
+ * Represents the [KendoReact PDFViewer component]({% slug api_pdf-viewer_pdfviewerprops %}).
+ */
+export declare const PDFViewer: React.ForwardRefExoticComponent<PDFViewerProps & React.RefAttributes<PDFViewerHandle | null>>;
+export {};