0
# PDF.js (pdfjs-dist)
1
2
PDF.js is a comprehensive PDF viewing and parsing library built entirely with HTML5 technologies. The pdfjs-dist package provides a generic, production-ready build that enables PDF rendering in web browsers without requiring plugins or native browser extensions, offering complete document parsing, rendering, and interactive features including form handling, annotations, and text extraction.
3
4
## Package Information
5
6
- **Package Name**: pdfjs-dist
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install pdfjs-dist`
10
- **Version**: 5.4.149
11
12
## Core Imports
13
14
```javascript
15
import { getDocument, GlobalWorkerOptions } from "pdfjs-dist";
16
```
17
18
For legacy build (older browsers):
19
20
```javascript
21
import { getDocument } from "pdfjs-dist/legacy/build/pdf.mjs";
22
```
23
24
CommonJS:
25
26
```javascript
27
const { getDocument, GlobalWorkerOptions } = require("pdfjs-dist");
28
```
29
30
## Basic Usage
31
32
```javascript
33
import { getDocument, GlobalWorkerOptions } from "pdfjs-dist";
34
35
// Configure worker (required)
36
GlobalWorkerOptions.workerSrc = "path/to/pdf.worker.mjs";
37
38
// Load a PDF document
39
const loadingTask = getDocument("path/to/document.pdf");
40
const pdf = await loadingTask.promise;
41
42
// Get the first page
43
const page = await pdf.getPage(1);
44
45
// Get page viewport for rendering
46
const viewport = page.getViewport({ scale: 1.0 });
47
48
// Render to canvas
49
const canvas = document.getElementById("pdf-canvas");
50
const context = canvas.getContext("2d");
51
canvas.width = viewport.width;
52
canvas.height = viewport.height;
53
54
const renderContext = {
55
canvasContext: context,
56
viewport: viewport
57
};
58
59
await page.render(renderContext).promise;
60
```
61
62
## Architecture
63
64
PDF.js is built around several key architectural components:
65
66
- **Document Layer**: Core PDF parsing and document management (`getDocument`, `PDFDocumentProxy`)
67
- **Page Layer**: Individual page handling and rendering (`PDFPageProxy`, `PageViewport`)
68
- **Display Layer**: Canvas rendering, text extraction, and layer management
69
- **Annotation System**: Interactive annotations and form handling
70
- **Editor Framework**: Tools for creating and editing annotations
71
- **Worker System**: Web worker-based PDF parsing for non-blocking operations
72
- **Utility Layer**: Helper functions for URL handling, data processing, and browser compatibility
73
74
## Capabilities
75
76
### Document Loading and Management
77
78
Core functionality for loading PDF documents from URLs, binary data, or streams. Handles document-level operations like metadata extraction, page navigation, and resource management.
79
80
```javascript { .api }
81
function getDocument(src: DocumentInitParameters): PDFDocumentLoadingTask;
82
83
interface DocumentInitParameters {
84
url?: string | URL;
85
data?: TypedArray | ArrayBuffer | Array<number> | string;
86
httpHeaders?: Record<string, string>;
87
withCredentials?: boolean;
88
password?: string;
89
length?: number;
90
range?: PDFDataRangeTransport;
91
rangeChunkSize?: number;
92
worker?: PDFWorker;
93
verbosity?: number;
94
docBaseUrl?: string;
95
cMapUrl?: string;
96
cMapPacked?: boolean;
97
CMapReaderFactory?: any;
98
iccUrl?: string;
99
useSystemFonts?: boolean;
100
standardFontDataUrl?: string;
101
StandardFontDataFactory?: any;
102
wasmUrl?: string;
103
WasmFactory?: any;
104
useWorkerFetch?: boolean;
105
useWasm?: boolean;
106
stopAtErrors?: boolean;
107
maxImageSize?: number;
108
isEvalSupported?: boolean;
109
isOffscreenCanvasSupported?: boolean;
110
isImageDecoderSupported?: boolean;
111
canvasMaxAreaInBytes?: number;
112
disableFontFace?: boolean;
113
fontExtraProperties?: boolean;
114
enableXfa?: boolean;
115
ownerDocument?: Document;
116
disableRange?: boolean;
117
disableStream?: boolean;
118
disableAutoFetch?: boolean;
119
pdfBug?: boolean;
120
CanvasFactory?: any;
121
FilterFactory?: any;
122
enableHWA?: boolean;
123
}
124
```
125
126
[Document API](./document-api.md)
127
128
### Page Rendering and Display
129
130
Page-level operations including rendering to canvas, viewport calculations, and visual transformations. Essential for displaying PDF content in web applications.
131
132
```javascript { .api }
133
interface PDFPageProxy {
134
render(params: RenderParameters): RenderTask;
135
getViewport(params: GetViewportParameters): PageViewport;
136
getAnnotations(params?: GetAnnotationsParameters): Promise<any[]>;
137
getTextContent(params?: GetTextContentParameters): Promise<TextContent>;
138
cleanup(): void;
139
}
140
141
interface RenderParameters {
142
canvasContext: CanvasRenderingContext2D;
143
viewport: PageViewport;
144
intent?: string;
145
enableWebGL?: boolean;
146
renderInteractiveForms?: boolean;
147
transform?: number[];
148
background?: string;
149
}
150
```
151
152
[Rendering API](./rendering-api.md)
153
154
### Text Extraction and Selection
155
156
Text layer functionality for extracting, searching, and enabling text selection within PDF documents.
157
158
```javascript { .api }
159
class TextLayer {
160
static render(parameters: TextLayerRenderParameters): TextLayerRenderTask;
161
static update(parameters: TextLayerUpdateParameters): void;
162
}
163
164
interface TextLayerRenderParameters {
165
textContentSource: ReadableStream | TextContent;
166
container: HTMLElement;
167
viewport: PageViewport;
168
textDivs?: HTMLElement[];
169
textContentItemsStr?: string[];
170
isOffscreenCanvasSupported?: boolean;
171
}
172
```
173
174
[Text Layer API](./text-layer.md)
175
176
### Annotation Handling
177
178
Interactive PDF annotations including links, form fields, and multimedia content. Supports both rendering existing annotations and creating new ones.
179
180
```javascript { .api }
181
class AnnotationLayer {
182
static render(parameters: AnnotationLayerParameters): void;
183
static update(parameters: AnnotationLayerParameters): void;
184
}
185
186
interface AnnotationLayerParameters {
187
viewport: PageViewport;
188
div: HTMLElement;
189
annotations: any[];
190
page: PDFPageProxy;
191
imageResourcesPath?: string;
192
renderForms?: boolean;
193
linkService: IPDFLinkService;
194
downloadManager?: IDownloadManager;
195
enableScripting?: boolean;
196
hasJSActionsPromise?: Promise<boolean>;
197
fieldObjectsPromise?: Promise<{ [id: string]: any }>;
198
annotationCanvasMap?: Map<string, HTMLCanvasElement>;
199
accessibilityManager?: any;
200
}
201
```
202
203
[Annotation API](./annotation-api.md)
204
205
### Annotation Editing
206
207
Interactive annotation creation and editing tools including freetext, highlighting, stamps, and ink annotations.
208
209
```javascript { .api }
210
class AnnotationEditorLayer {
211
render(parameters: AnnotationEditorLayerParameters): void;
212
update(parameters: AnnotationEditorLayerParameters): void;
213
updateMode(mode: number): void;
214
addInkEditorIfNeeded(isCommitting: boolean): void;
215
addStampEditorIfNeeded(): void;
216
destroy(): void;
217
}
218
219
class AnnotationEditorUIManager {
220
updateUI(editor: any): void;
221
updateMode(mode: number): void;
222
getMode(): number;
223
destroy(): void;
224
}
225
```
226
227
[Editor API](./editor-api.md)
228
229
### XFA Forms
230
231
XML Forms Architecture (XFA) support for dynamic PDF forms and interactive content.
232
233
```javascript { .api }
234
class XfaLayer {
235
static render(parameters: XfaLayerParameters): XfaLayerResult;
236
static update(parameters: XfaLayerParameters): void;
237
}
238
239
interface XfaLayerParameters {
240
viewport: PageViewport;
241
div: HTMLElement;
242
xfaHtml: Element;
243
annotationStorage?: AnnotationStorage;
244
linkService: IPDFLinkService;
245
xfaHtmlFactory: any;
246
}
247
```
248
249
[XFA API](./xfa-api.md)
250
251
### Configuration and Workers
252
253
Global configuration options and web worker management for optimal performance and browser compatibility.
254
255
```javascript { .api }
256
const GlobalWorkerOptions: {
257
workerSrc: string;
258
workerPort?: MessagePort;
259
};
260
261
class PDFWorker {
262
constructor(params?: PDFWorkerParameters);
263
destroy(): void;
264
static fromPort(params: FromPortParameters): PDFWorker;
265
static getWorkerSrc(): string;
266
}
267
```
268
269
[Configuration API](./configuration.md)
270
271
## Version and Build Information
272
273
Core version and build information for the PDF.js library.
274
275
```javascript { .api }
276
const version: string;
277
const build: string;
278
```
279
280
## Exception Classes
281
282
Exception classes thrown by various PDF.js operations.
283
284
```javascript { .api }
285
class AbortException extends Error {
286
constructor(msg: string);
287
readonly name: "AbortException";
288
}
289
290
class InvalidPDFException extends Error {
291
constructor(msg: string);
292
readonly name: "InvalidPDFException";
293
}
294
295
class ResponseException extends Error {
296
constructor(msg: string, status: number, missing: boolean);
297
readonly name: "ResponseException";
298
readonly status: number;
299
readonly missing: boolean;
300
}
301
302
class PasswordException extends Error {
303
constructor(msg: string, code: number);
304
readonly name: "PasswordException";
305
readonly code: number;
306
}
307
```
308
309
## Utility Functions
310
311
Core utility functions for URL handling, data processing, and browser compatibility.
312
313
```javascript { .api }
314
function createValidAbsoluteUrl(url: string, baseUrl?: string): URL | null;
315
function isValidExplicitDest(dest: any): boolean;
316
function fetchData(src: string | URL): Promise<Uint8Array>;
317
function getRGB(color: string): [number, number, number];
318
function getFilenameFromUrl(url: string, onlyStripPath?: boolean): string;
319
function getPdfFilenameFromUrl(url: string, defaultFilename?: string): string;
320
function isDataScheme(url: string): boolean;
321
function isPdfFile(filename: string): boolean;
322
function noContextMenu(element: HTMLElement): void;
323
function stopEvent(event: Event): void;
324
```
325
326
## Display and Rendering Utilities
327
328
Utility classes and functions for rendering, canvas management, and UI components.
329
330
```javascript { .api }
331
class OutputScale {
332
constructor(sx: number, sy: number);
333
sx: number;
334
sy: number;
335
scaled: boolean;
336
}
337
338
class DOMSVGFactory {
339
create(width: number, height: number): SVGElement;
340
createElement(type: string): SVGElement;
341
}
342
343
class DrawLayer {
344
constructor(params: DrawLayerParameters);
345
render(intent?: string): Promise<void>;
346
cancel(): void;
347
destroy(): void;
348
}
349
350
class ColorPicker {
351
constructor(params: ColorPickerParameters);
352
renderMainColor(color: number[]): void;
353
renderButton(): HTMLButtonElement;
354
}
355
356
class TouchManager {
357
constructor(element: HTMLElement);
358
destroy(): void;
359
}
360
361
class SignatureExtractor {
362
static extract(data: Uint8Array): Promise<SignatureInfo[]>;
363
}
364
```
365
366
## Constants and Enumerations
367
368
```javascript { .api }
369
// Annotation types
370
enum AnnotationType {
371
TEXT = 1,
372
LINK = 2,
373
FREETEXT = 3,
374
LINE = 4,
375
SQUARE = 5,
376
CIRCLE = 6,
377
POLYGON = 7,
378
POLYLINE = 8,
379
HIGHLIGHT = 9,
380
UNDERLINE = 10,
381
SQUIGGLY = 11,
382
STRIKEOUT = 12,
383
STAMP = 13,
384
CARET = 14,
385
INK = 15,
386
POPUP = 16,
387
FILEATTACHMENT = 17,
388
SOUND = 18,
389
MOVIE = 19,
390
WIDGET = 20,
391
SCREEN = 21,
392
PRINTERMARK = 22,
393
TRAPNET = 23,
394
WATERMARK = 24,
395
THREED = 25,
396
REDACT = 26
397
}
398
399
// Annotation editor types
400
enum AnnotationEditorType {
401
DISABLE = -1,
402
NONE = 0,
403
FREETEXT = 3,
404
HIGHLIGHT = 9,
405
STAMP = 13,
406
INK = 15,
407
POPUP = 16,
408
SIGNATURE = 101,
409
COMMENT = 102
410
}
411
412
// Annotation editor parameter types
413
enum AnnotationEditorParamsType {
414
RESIZE = 1,
415
CREATE = 2,
416
FREETEXT_SIZE = 11,
417
FREETEXT_COLOR = 12,
418
FREETEXT_OPACITY = 13,
419
INK_COLOR = 21,
420
INK_THICKNESS = 22,
421
INK_OPACITY = 23,
422
HIGHLIGHT_COLOR = 31,
423
HIGHLIGHT_THICKNESS = 32,
424
HIGHLIGHT_FREE = 33,
425
HIGHLIGHT_SHOW_ALL = 34,
426
DRAW_STEP = 41
427
}
428
429
// Annotation mode
430
enum AnnotationMode {
431
DISABLE = 0,
432
ENABLE = 1,
433
ENABLE_FORMS = 2,
434
ENABLE_STORAGE = 3
435
}
436
437
// Permission flags
438
enum PermissionFlag {
439
PRINT = 0x04,
440
MODIFY_CONTENTS = 0x08,
441
COPY = 0x10,
442
MODIFY_ANNOTATIONS = 0x20,
443
FILL_INTERACTIVE_FORMS = 0x100,
444
COPY_FOR_ACCESSIBILITY = 0x200,
445
ASSEMBLE = 0x400,
446
PRINT_HIGH_QUALITY = 0x800
447
}
448
449
// Verbosity levels
450
enum VerbosityLevel {
451
ERRORS = 0,
452
WARNINGS = 1,
453
INFOS = 5
454
}
455
456
// Image formats
457
enum ImageKind {
458
GRAYSCALE_1BPP = 1,
459
RGB_24BPP = 2,
460
RGBA_32BPP = 3
461
}
462
463
// Password response codes
464
enum PasswordResponses {
465
NEED_PASSWORD = 1,
466
INCORRECT_PASSWORD = 2
467
}
468
469
// Operation codes for internal PDF operations
470
const OPS: {
471
dependency: number;
472
setLineWidth: number;
473
setLineCap: number;
474
setLineJoin: number;
475
setMiterLimit: number;
476
setDash: number;
477
setRenderingIntent: number;
478
setFlatness: number;
479
setGState: number;
480
save: number;
481
restore: number;
482
transform: number;
483
moveTo: number;
484
lineTo: number;
485
curveTo: number;
486
curveTo2: number;
487
curveTo3: number;
488
closePath: number;
489
rectangle: number;
490
stroke: number;
491
closeStroke: number;
492
fill: number;
493
eoFill: number;
494
fillStroke: number;
495
eoFillStroke: number;
496
closeFillStroke: number;
497
closeEOFillStroke: number;
498
endPath: number;
499
clip: number;
500
eoClip: number;
501
beginText: number;
502
endText: number;
503
setCharSpacing: number;
504
setWordSpacing: number;
505
setHScale: number;
506
setLeading: number;
507
setFont: number;
508
setTextRenderingMode: number;
509
setTextRise: number;
510
moveText: number;
511
setLeadingMoveText: number;
512
setTextMatrix: number;
513
nextLine: number;
514
showText: number;
515
showSpacedText: number;
516
nextLineShowText: number;
517
nextLineSetSpacingShowText: number;
518
setCharWidth: number;
519
setCharWidthAndBounds: number;
520
setStrokeColorSpace: number;
521
setFillColorSpace: number;
522
setStrokeColor: number;
523
setStrokeColorN: number;
524
setFillColor: number;
525
setFillColorN: number;
526
setStrokeGray: number;
527
setFillGray: number;
528
setStrokeRGBColor: number;
529
setFillRGBColor: number;
530
setStrokeCMYKColor: number;
531
setFillCMYKColor: number;
532
shadingFill: number;
533
beginInlineImage: number;
534
beginImageData: number;
535
endInlineImage: number;
536
paintXObject: number;
537
markPoint: number;
538
markPointProps: number;
539
beginMarkedContent: number;
540
beginMarkedContentProps: number;
541
endMarkedContent: number;
542
beginCompat: number;
543
endCompat: number;
544
paintFormXObjectBegin: number;
545
paintFormXObjectEnd: number;
546
beginGroup: number;
547
endGroup: number;
548
beginAnnotations: number;
549
endAnnotations: number;
550
beginAnnotation: number;
551
endAnnotation: number;
552
paintJpegXObject: number;
553
paintImageMaskXObject: number;
554
paintImageMaskXObjectGroup: number;
555
paintImageXObject: number;
556
paintInlineImageXObject: number;
557
paintInlineImageXObjectGroup: number;
558
paintImageXObjectRepeat: number;
559
paintImageMaskXObjectRepeat: number;
560
paintSolidColorImageMask: number;
561
constructPath: number;
562
};
563
```