-
Notifications
You must be signed in to change notification settings - Fork 1
Annotations in PDF documents
PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5. It's community-driven and supported by Mozilla. The goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs. This open source JavaScript library allows you to render PDF files in a web browser without the need for any plugins or external software.
PDF.js is designed to be modular, with each module focusing on a specific task. This modular architecture allows you to include only the modules you need, reducing the size of your code and improving performance. PDF.js has several layers, each with its own purpose:
Core layer — This is the lowest-level layer of PDF.js, responsible for parsing the binary format of a PDF file and converting it into an internal representation that can be used by higher-level layers. The core layer is typically used directly only by advanced users who need fine-grained control of the parsing process.
Display layer — The display layer builds upon the core layer and provides a more user-friendly API for rendering PDF files. With the display layer, you can easily render a PDF page into a element using just a few lines of JavaScript code. This layer is suitable for most day-to-day use cases.
Viewer layer — The viewer layer is a ready-to-use user interface (UI) that comes with PDF.js. It includes features like search, rotation, a thumbnail sidebar, and more. The viewer layer is built on top of the display layer and provides a complete PDF viewing experience out of the box.
PDF.js provides a set of features for viewing, annotating, and manipulating PDF documents:
- Render PDF documents in the browser using the HTML5 element
- Search for text within a document
- View page thumbnails
- Zoom in and out of pages
- Rotate pages
- Add text and highlight annotations to a document
- Fill out PDF form fields
- View and navigate through bookmarks and document outlines
The PDF.js viewer let you draw and add text to the pdf, these annotations are included When downloading the document. However, the creation and management of annotations programmatically is cumbersome, e.g. save the annotations to a plain JSON format and show when it is open again.
To quote Sina Tayebati:
If anyone is still seeking a solution to programmatically add annotations to PDFs and use the PDF.js viewer for rendering, I highly recommend checking out this repository: pdfAnnotate.
I experienced the same pain when needed to add annotations programmatically on the server side and display them on the client side, and this incredible work saved me.
For me, using the "AnnotationStorage" feature from PDF.js proved to be complex and nearly impossible to achieve. However, after discovering this repository, I found that it provided a straightforward solution. Its integration with PDF.js is seamless, making it incredibly easy to work with. Additionally, it offers a variety of annotation types and is extensively documented, making the entire process smooth and efficient.
You will find this helpful to implement annotations. Sina Tayebati just put together a demo in this repo and tried to document integration of pdfAnnotate and PDFjs.
pdfjs-annotation Vue + PDFjs viewer & programmatic annotation using pdfAnnotate
pdfAnnotate Thomas Osterland original solution, JavaScript library for creating annotations in PDF documents.