search

yermolim / ts-pdf

PDF.js-based PDF files viewer with annotation support
GNU Affero General Public License v3.0
81 stars 17 forks source link

readme

ts-pdf 📄

Npm License

A PDF.js-based PDF viewer written in TypeScript.

Features

How it works in a nutshell

PDF file source data (decrypted if needed) is parsed using the custom parser written from scratch. Annotations of all the supported types are extracted from the source file. The 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. The extracted annotations are rendered to SVG on top of the pages by the custom PDF appearance stream renderer. User 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. All changes are made can be saved to a new PDF file, which can be downloaded or returned to the caller as a byte array.

Currently supported annotation types

Currently supported PDF encryption algorithms

Yet to be implemented

Currently supported PDF stream encoding algorithms

Not implemented yet

Getting started

Installation into your project

npm install ts-pdf

Running the simplest example

import { TsPdfViewer, TsPdfViewerOptions } from "ts-pdf";

async function run(): Promise<void> {  
  const options: TsPdfViewerOptions = {
    containerSelector: "#your-html-container-selector", 
    workerSource: "assets/pdf.worker.min.mjs", // path to the PDF.js worker script
    userName: "your_username",
    // you can check other properties using your editor hints
  };
  const viewer = new TsPdfViewer(options);
  await viewer.openPdfAsync("your_file.pdf");
} 

run();

⚠️for viewer to function properly its container element must have relative, absolute or fixed position!

⚠️the PDF.js worker version must match the version of the pdfjs-dist module. When you have the module installed, you can find the default worker file in your node_modules folder: './node_modules/pdfjs-dist/build/pdf.worker.min.mjs'.

Changing the color scheme

To apply a custom color scheme to the viewer, assign color values to the following CSS variables. Default values are used for omitted variables.

:root {
  --tspdf-color-primary: rgba(77, 88, 115, 1);
  --tspdf-color-primary-tr: rgba(77, 88, 115, 0.9);
  --tspdf-color-secondary: rgb(113, 133, 150);
  --tspdf-color-secondary-tr: rgba(113, 133, 150, 0.9);
  --tspdf-color-accent: rgba(64, 72, 95, 1);
  --tspdf-color-shadow: rgba(0, 0, 0, 0.75);
  --tspdf-color-bg: rgba(128, 128, 128,1);
  --tspdf-color-fg-primary: rgba(255, 255, 255, 1);
  --tspdf-color-fg-secondary:rgba(187, 187, 187, 1);
  --tspdf-color-fg-accent: rgb(255, 204, 0);
  --tspdf-color-text-selection: rgba(104, 104, 128, 0.3);
}

Keyboard shortcuts

Solving Angular app compilation issue

When 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. The easy solution is to replace 

"main": "build/pdf.js"

with 

"main": "es5/build/pdf.js"

inside 

"/node_modules/pdfjs-dist/package.json"

The other one is to make your own build of PDF.js.

TODO list

External dependencies:

Running the demo

  • Clone the repository to your local machine
  • (optional) Change the host/port if needed in the 'ls-config.json' file
  • Run the 'npm run start' command from the project folder
  • Open the demo page in your web browser

Additional information