\r\nA PDF.js-based PDF viewer written in TypeScript.\r\n\r\n## Features\r\n
\r\n
opening and viewing PDF files
\r\n
comparing two PDF files and visualizing differences
\r\n
adding and editing PDF annotations (supported annotation types are listed below)
\r\n
custom parsing and rendering for the supported annotation types
\r\n
annotation import/export to/from data-transfer objects that can be effortlessly serialized to JSON (useful for storing annotations in the separate database)
\r\n
compliance to the official PDF specification (v1.7)
\r\n
encrypted PDF-files support (supported encryption algorithms are listed below)
\r\n
responsive UI, friendly for touch devices
\r\n
easy color scheme customization using CSS variables to override the default values
\r\n
using Shadow DOM to minimize conflicts with outer HTML
\r\n
page and annotation parsing is run in background threads using web workers to minimize interface lags
\r\n
\r\n\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n\r\n## How it works in a nutshell\r\nPDF file source data (decrypted if needed) is parsed using the custom parser written from scratch. \r\nAnnotations of all the supported types are extracted from the source file. \r\nThe resulting PDF file (without the supported annotations) is handled by the PDF.js worker, which is used to render the file contents and build a text layer. \r\nThe extracted annotations are rendered to SVG on top of the pages by the custom PDF appearance stream renderer. \r\nUser can modify or delete any supported annotation or add new annotations of the supported types by using provided UI. The annotations can be imported or exported at any time using corresponding methods. \r\nAll changes are made can be saved to a new PDF file, which can be downloaded or returned to the caller as a byte array.\r\n\r\n### Currently supported annotation types\r\n
\r\n
Ink annotation
\r\n
Stamp annotation
\r\n
Line annotation
\r\n
Square annotation
\r\n
Circle annotation
\r\n
Polygon annotation
\r\n
Polyline annotation
\r\n
Highlight annotation
\r\n
Underline annotation
\r\n
Squiggly annotation
\r\n
Strikeout annotation
\r\n
Text annotation (only note icon)
\r\n
Free text annotation
\r\n
\r\n\r\n### Currently supported PDF encryption algorithms\r\n
\r\n
V1R2 (RC4 with 40-bit key)
\r\n
V2R3 (RC4 with 128-bit key)
\r\n
V4R4 (RC4 or AES with 128-bit key)
\r\n
\r\n\r\n#### Yet to be implemented\r\n
\r\n
V5R5 (AES with 256-bit key)
\r\n
V5R6 (AES with 256-bit key, PDF 2.0)
\r\n
\r\n\r\n### Currently supported PDF stream encoding algorithms\r\n
\r\n
Flate
\r\n
DCT
\r\n
JBIG2
\r\n
JPX
\r\n
\r\n\r\n#### Not implemented yet\r\n
\r\n
LZW
\r\n
ASCII base-85
\r\n
ASCII hexadecimal
\r\n
CCITT
\r\n
Run-length
\r\n
\r\n\r\n\r\n## Getting started\r\n\r\n### Installation into your project\r\n```\r\nnpm install ts-pdf\r\n```\r\n\r\n### Running the simplest example\r\n```javascript\r\nimport { TsPdfViewer, TsPdfViewerOptions } from \"ts-pdf\";\r\n\r\nasync function run(): Promise { \r\n const options: TsPdfViewerOptions = {\r\n containerSelector: \"#your-html-container-selector\", \r\n workerSource: \"assets/pdf.worker.min.js\", // path to the PDF.js worker script\r\n userName: \"your_username\",\r\n // you can check other properties using your editor hints\r\n };\r\n const viewer = new TsPdfViewer(options);\r\n await viewer.openPdfAsync(\"your_file.pdf\");\r\n} \r\n\r\nrun();\r\n```\r\n\r\n#### β οΈfor viewer to function properly its container element must have relative, absolute or fixed position!\r\n\r\n### Changing the color scheme\r\n\r\nTo apply a custom color scheme to the viewer, assign color values to the following CSS variables. Default values are used for omitted variables.\r\n```css\r\n:root {\r\n --tspdf-color-primary: rgba(77, 88, 115, 1);\r\n --tspdf-color-primary-tr: rgba(77, 88, 115, 0.9);\r\n --tspdf-color-secondary: rgb(113, 133, 150);\r\n --tspdf-color-secondary-tr: rgba(113, 133, 150, 0.9);\r\n --tspdf-color-accent: rgba(64, 72, 95, 1);\r\n --tspdf-color-shadow: rgba(0, 0, 0, 0.75);\r\n --tspdf-color-bg: rgba(128, 128, 128,1);\r\n --tspdf-color-fg-primary: rgba(255, 255, 255, 1);\r\n --tspdf-color-fg-secondary:rgba(187, 187, 187, 1);\r\n --tspdf-color-fg-accent: rgb(255, 204, 0);\r\n --tspdf-color-text-selection: rgba(104, 104, 128, 0.3);\r\n}\r\n```\r\n\r\n### Keyboard shortcuts\r\n
\r\n
alt + ctrl + o => open file (if the corresponding button is allowed in options)
\r\n
alt + ctrl + s => save file (if the corresponding button is allowed in options)
\r\n
alt + ctrl + x => close file (if the corresponding button is allowed in options)
\r\n
alt + ctrl + t => toggle preview panel visibility
\r\n
alt + ctrl + 1 => text selection mode
\r\n
alt + ctrl + 2 => hand drag mode
\r\n
alt + ctrl + 3 => annotation mode
\r\n
alt + ctrl + 4 => comparison mode
\r\n
escape => clear annotation (in annotation add mode)
\r\n
backspace => undo last action (in annotation add mode)
\r\n
enter => save annotation (in annotation add mode)
\r\n
ctrz + z => undo last annotation edit
\r\n
β => zoom in
\r\n
β => zoom out
\r\n
β => previous page
\r\n
β => next page
\r\n
< => rotate left
\r\n
> => rotate right
\r\n
\r\n\r\n### Solving Angular app compilation issue\r\n\r\nWhen using this module inside an Angular app you can face the problem that your project is not compiling because of 'SyntaxError: Unexpected token'. The cause of such behavior is that Angular 11.x and lower use Webpack v4.x that does not support fluent null-check syntax ('?.'), which is present in 'pdfjs-dist' build. \r\nThe easy solution is to replace \r\n```json\r\n\"main\": \"build/pdf.js\" \r\n```\r\nwith \r\n```json\r\n\"main\": \"es5/build/pdf.js\" \r\n```\r\ninside \r\n```\r\n\"/node_modules/pdfjs-dist/package.json\"\r\n```\r\nThe other one is to make your own build of PDF.js.\r\n\r\n\r\n## TODO list\r\n
\r\n
add ink annotations support added in 0.1.0
\r\n
add geometric annotations (line, polyline, polygon, square, circle) support added in 0.2.0
\r\n
add text markup annotations (underline, strikeout, highlight, squiggly) support added in 0.4.0
\r\n
add text annotations (note) support added in 0.4.0
\r\n
add page rotation support added in 0.5.0
\r\n
add annotation blending modes support added in 0.5.2
\r\n
add custom stamp annotations support added in 0.6.0
\r\n
optimize loading and saving files some optimizations were made in 0.6.2
\r\n
add text caption support for line annotations added in 0.6.6
\r\n
add free text annotations support added in 0.7.0
\r\n
add 'undo' button and corresponding logic added in 0.7.0
\r\n
move parser to background thread using web workers added in 0.9.0
\r\n
add keyboard shortcutsadded in 0.10.0
\r\n
add document comparison modeadded in 0.11.0
\r\n
add tooltips to buttons
\r\n
add user-frienly error messages on failed file opening
\r\n
make error messages more informative
\r\n
add proper support for linearized PDF files
\r\n
add more options for line annotations
\r\n
add more options for free text annotations
\r\n
add watermark tool (with watermark generator)
\r\n
add localizations
\r\n
add tests
\r\n
limit users to editing their own annotations only (optionally)
\r\n
further optimization of the parser and the renderer
\r\n
support for PDF 2.0 features (requires purchasing the specification)
\r\n
support for the rest of encryption algorithms (on request only)
\r\n
support for the rest of encoding algorithms (on request only)
![\"Npm\"](\"https://img.shields.io/npm/v/ts-pdf\")
\r\n \r\n \r\n ![\"License\"](\"https://img.shields.io/badge/license-AGPL-blue.svg?style=flat-round\"){kind=icon}
\r\n \r\n ![](\"https://raw.githubusercontent.com/yermolim/ts-pdf/main/gifs/main.gif\")
\r\n![](\"https://raw.githubusercontent.com/yermolim/ts-pdf/main/gifs/mobile.gif\")
\r\n ![](\"https://raw.githubusercontent.com/yermolim/ts-pdf/main/gifs/mobile-annots.gif\")
\r\n ![](\"https://raw.githubusercontent.com/yermolim/ts-pdf/main/gifs/text.gif\")
\r\n