ngx-extended-pdf-viewer
Version:
Embedding PDF files in your Angular application. Highly configurable viewer including the toolbar, sidebar, and all the features you're used to.
250 lines (249 loc) • 12.3 kB
TypeScript
import { RendererFactory2 } from '@angular/core';
import { AnnotationMode, EditorAnnotation } from './options/editor-annotations';
import { PdfLayer } from './options/optional_content_config';
import { PDFPrintRange } from './options/pdf-print-range';
import { PDFNotificationService } from './pdf-notification-service';
import * as i0 from "@angular/core";
export interface FindOptions {
highlightAll?: boolean;
matchCase?: boolean;
wholeWords?: boolean;
matchDiacritics?: boolean;
dontScrollIntoView?: boolean;
findMultiple?: boolean;
regexp?: boolean;
useSecondaryFindcontroller?: boolean;
}
export interface PDFExportScaleFactor {
width?: number;
height?: number;
scale?: number;
}
type DirectionType = 'ltr' | 'rtl' | 'both' | undefined;
export interface PdfImageParameters {
urlOrDataUrl: string;
page?: number;
left?: number | string;
bottom?: number | string;
right?: number | string;
top?: number | string;
rotation?: 0 | 90 | 180 | 270;
}
export interface Line {
x: number;
y: number;
width: number;
height: number;
direction: DirectionType;
text: string;
}
export interface Section {
x: number;
y: number;
width: number;
height: number;
direction: DirectionType;
lines: Array<Line>;
}
export declare class NgxExtendedPdfViewerService {
private readonly rendererFactory;
/**
* Tracks the most recently mounted `<ngx-extended-pdf-viewer>` instance's `openPDF()`
* completion. Public for backward compatibility — historically used as the "is the viewer
* ready?" gate when the library only supported a single instance at a time.
*
* Today this flag is **not** the source of truth for the service's own `find()` /
* `findNext()` / `findPrevious()` methods; those gate on the live `findController`
* directly. Component-internal effect guards have moved to a per-instance flag.
*
* In a future multi-viewer world this field will likely become "any viewer is mounted".
* Prefer querying viewer state via a viewer reference (see future API) instead of via
* this singleton flag.
*/
ngxExtendedPdfViewerInitialized: boolean;
secondaryMenuIsEmpty: import("@angular/core").WritableSignal<boolean>;
private readonly renderer;
private PDFViewerApplication?;
constructor(rendererFactory: RendererFactory2, notificationService: PDFNotificationService);
find(text: string | string[] | RegExp, options?: FindOptions): Array<Promise<number>> | undefined;
findNext(useSecondaryFindcontroller?: boolean): boolean;
findPrevious(useSecondaryFindcontroller?: boolean): boolean;
print(printRange?: PDFPrintRange): void;
removePrintRange(): void;
setPrintRange(printRange: PDFPrintRange): void;
filteredPageCount(pageCount: number, range: PDFPrintRange): number;
isInPDFPrintRange(pageIndex: number, printRange: PDFPrintRange): boolean;
getPageAsLines(pageNumber: number): Promise<Array<Line>>;
getPageAsText(pageNumber: number): Promise<string>;
private convertTextInfoToText;
getPageAsCanvas(pageNumber: number, scale: PDFExportScaleFactor, background?: string, backgroundColorToReplace?: string, annotationMode?: AnnotationMode): Promise<HTMLCanvasElement | undefined>;
getPageAsImage(pageNumber: number, scale: PDFExportScaleFactor, background?: string, backgroundColorToReplace?: string, annotationMode?: AnnotationMode): Promise<string | undefined>;
private draw;
private getPageDrawContext;
getCurrentDocumentAsBlob(): Promise<Blob | undefined>;
getFormData(currentFormValues?: boolean): Promise<Array<Object>>;
/**
* Adds a page to the rendering queue
* @param {number} pageIndex Index of the page to render
* @returns {boolean} false, if the page has already been rendered,
* if it's out of range or if the viewer hasn't been initialized yet
*/
addPageToRenderQueue(pageIndex: number): boolean;
isRenderQueueEmpty(): boolean;
hasPageBeenRendered(pageIndex: number): boolean;
private sleep;
renderPage(pageIndex: number): Promise<void>;
currentlyRenderedPages(): Array<number>;
numberOfPages(): number;
getCurrentlyVisiblePageNumbers(): Array<number>;
listLayers(): Promise<Array<PdfLayer> | undefined>;
toggleLayer(layerId: string): Promise<void>;
scrollPageIntoView(pageNumber: number, pageSpot?: {
top?: number | string;
left?: number | string;
}): void;
/**
* Returns all editor annotations (drawings, text, images, highlights) in serialized format.
*
* **IMPORTANT - ID Behavior:**
* - Each annotation includes an `id` field for real-time event tracking via `annotationEditorEvent`
* - When re-applying annotations using `addEditorAnnotation()`, **new IDs are always assigned**
* - IDs are **not persistent** across sessions - they are temporary identifiers
* - If you need to store annotations for later use, you can safely **omit the `id` field**
*
* **Example - Storing and Re-applying Annotations:**
* ```typescript
* // Save annotations (IDs are optional to store)
* const annotations = pdfService.getSerializedAnnotations();
* const toStore = annotations.map(({ id, ...rest }) => rest); // Remove IDs
* localStorage.setItem('annotations', JSON.stringify(toStore));
*
* // Re-apply annotations (new IDs will be assigned automatically)
* const stored = JSON.parse(localStorage.getItem('annotations'));
* await pdfService.addEditorAnnotation(stored);
* ```
*
* @returns Array of serialized annotations with temporary IDs, or null if no annotations exist
*/
getSerializedAnnotations(): EditorAnnotation[] | null | undefined;
/**
* Returns a single editor annotation by its ID.
*
* **IMPORTANT - ID Behavior:**
* - IDs are temporary and only valid during the current session
* - Useful for responding to `annotationEditorEvent` events
* - Do not rely on IDs to persist across document reloads or sessions
*
* @param id The temporary unique identifier of the annotation (from `annotationEditorEvent` or `getSerializedAnnotations()`)
* @returns The serialized annotation matching the ID, or null if not found
*/
getSerializedAnnotation(id: string): EditorAnnotation | null | undefined;
/**
* Programmatically adds one or more editor annotations to the PDF.
*
* **IMPORTANT - ID Behavior:**
* - Any `id` fields in the provided annotations are **ignored**
* - New unique IDs are always assigned automatically
* - This ensures no ID conflicts occur
* - The `id` field is optional when calling this method
*
* **Supported Annotation Types:**
* - Ink (drawings)
* - FreeText (text boxes)
* - Stamp (images)
* - Highlight
* - Popup (comments)
*
* **Timing:** an annotation is added to a page's annotation _editor_ layer,
* which is created only after that page has been rendered (slightly after the
* display annotation layer). Wait for the page's `(annotationEditorLayerRendered)`
* event before calling this method - **not** `(annotationLayerRendered)`, which
* fires too early. Calling it before the editor layer exists logs
* `paste: "Cannot read properties of undefined (reading 'deserialize')"` and adds
* nothing (see issue #2656).
*
* @param serializedAnnotation A single annotation object, array of annotations, or JSON string
* @returns Promise that resolves when the annotation(s) have been added
*
* @example
* // Add a single annotation (with or without ID - both work the same)
* await pdfService.addEditorAnnotation({
* annotationType: 3,
* color: [255, 0, 0],
* value: 'Hello',
* pageIndex: 0,
* rect: [100, 100, 200, 150],
* rotation: 0
* // id field is optional and will be ignored if provided
* });
*/
addEditorAnnotation(serializedAnnotation: string | EditorAnnotation): Promise<void>;
removeEditorAnnotations(filter?: (serialized: object) => boolean): void;
private loadImageAsDataURL;
/**
* Adds an image to a page as a stamp (editor) annotation. Since this is a
* viewer rather than an editor, the image is placed on the annotation editor
* layer; in most cases the result is indistinguishable from a real stamp.
*
* The `left`, `bottom`, `right`, and `top` coordinates accept percentages
* (e.g. `'50%'`), pixels (e.g. `'100px'`), or PDF coordinates (e.g. `100`).
* Omitted coordinates default to the logical origin (`left`/`bottom` to `0`,
* `right`/`top` to `'100%'`). If `page` is omitted, the current page is used.
*
* **Timing:** wait for the target page's `(annotationEditorLayerRendered)`
* event before calling this - **not** `(annotationLayerRendered)`. The editor
* layer is created only after the page is rendered, so calling it too early
* logs `paste: "Cannot read properties of undefined (reading 'deserialize')"`
* and adds nothing (see issue #2656). On large, lazily-rendered documents,
* add each page's image from its own `(annotationEditorLayerRendered)` handler.
*
* @param parameters The image source, optional target page, position, and rotation
* @returns Promise that resolves once the image has been added
*/
addImageToAnnotationLayer({ urlOrDataUrl, page, left, bottom, right, top, rotation }: PdfImageParameters): Promise<void>;
/**
* Adds a highlight (editor) annotation to a page.
*
* The `left`, `bottom`, `right`, and `top` coordinates accept percentages
* (e.g. `'50%'`), pixels (e.g. `'100px'`), or PDF coordinates (e.g. `100`).
* If `page` is omitted (`undefined`), the current page is used.
*
* **Timing:** like {@link addImageToAnnotationLayer}, wait for the target
* page's `(annotationEditorLayerRendered)` event before calling this - **not**
* `(annotationLayerRendered)`. Calling it before the editor layer exists logs
* `paste: "Cannot read properties of undefined (reading 'deserialize')"` and
* adds nothing (see issue #2656).
*
* @param color RGB color as a 0-255 triple, e.g. `[255, 255, 0]` for yellow
* @param page Zero-based page index, or `undefined` for the current page
* @param left Left edge (percentage, pixels, or PDF coordinate)
* @param bottom Bottom edge (percentage, pixels, or PDF coordinate)
* @param right Right edge (percentage, pixels, or PDF coordinate)
* @param top Top edge (percentage, pixels, or PDF coordinate)
* @param thickness Highlighter thickness; defaults to `12`
* @param rotation Rotation in degrees (`0`, `90`, `180`, or `270`); defaults to `0`
* @param opacity Opacity between `0` and `1`; defaults to `0.5`
* @returns Promise that resolves once the highlight has been added
*/
addHighlightToAnnotationLayer(color: number[], page: number | undefined, left: number | string, bottom: number | string, right: number | string, top: number | string, thickness?: number, rotation?: 0 | 90 | 180 | 270, opacity?: number): Promise<void>;
currentPageIndex(): number | undefined;
private convertToPDFCoordinates;
switchAnnotationEdtorMode(mode: number): void;
set editorFontSize(size: number);
set editorFontColor(color: string);
set editorInkColor(color: string);
set editorInkOpacity(opacity: number);
set editorInkThickness(thickness: number);
set editorHighlightColor(color: string);
/** @deprecated This feature was never wired up in pdf.js. Use editorHighlightColor instead. */
set editorHighlightDefaultColor(color: string);
set editorHighlightShowAll(showAll: boolean);
set editorHighlightThickness(thickness: number);
setEditorProperty(editorPropertyType: number, value: any): void;
getCurrentPage(): number;
getPageCount(): number;
movePage(fromIndex: number, toIndex: number): void;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxExtendedPdfViewerService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<NgxExtendedPdfViewerService>;
}
export {};