instructure / pdf-annotate.js

Annotation layer for pdf.js (no longer maintained)

pdf-annotate.js (no longer maintained)

Annotation layer for pdf.js

Objectives

• Provide a low level annotation layer for pdf.js.
• Optional high level UI for managing annotations.
• Agnostic of backend, just supply your own StoreAdapter to fetch/store data.
• Prescribe annotation format.

Example

import __pdfjs from 'pdfjs-dist/build/pdf';
import PDFJSAnnotate from 'pdfjs-annotate';
import MyStoreAdapter from './myStoreAdapter';

const { UI } = PDFJSAnnotate;
const VIEWER = document.getElementById('viewer');
const RENDER_OPTIONS = {
  documentId: 'MyPDF.pdf',
  pdfDocument: null,
  scale: 1,
  rotate: 0
};

PDFJS.workerSrc = 'pdf.worker.js';
PDFJSAnnotate.setStoreAdapter(MyStoreAdapter);

PDFJS.getDocument(RENDER_OPTIONS.documentId).then((pdf) => {
  RENDER_OPTIONS.pdfDocument = pdf;
  VIEWER.appendChild(UI.createPage(1));
  UI.renderPage(1, RENDER_OPTIONS);
});

See more examples.

Documentation

View the docs.

Developing

# clone the repo
$ git clone https://github.com/instructure/pdf-annotate.js.git
$ cd pdf-annotate.js

# intall dependencies
$ npm install

# start example server
$ npm start
$ open http://127.0.0.1:8080

# run tests
$ npm test

License

MIT

pdf-annotate.js's Issues

UI.renderPage not documented

It seems PDFJSAnnotate.render is where metadata is set, but PDFJSAnnotate.UI.renderPage is what the main example is using, which does not in turn use PDFJSAnnotate.render. UI.renderPage however is not documented.

npm ERR! ./scripts/web when try to start

Hi Team,

I am facing below error when execute npm start command. Please help to resolve this error. i am using window 7 - 64 bit OS environment for development.

npm start

[email protected] start ..\AkritiveProject\pdf-annotate.js

./scripts/web

'.' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "..Program Files\nodejs\node.exe" "..\AppDa
ta\Roaming\npm\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.9.2
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: ./scripts/web
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script './scripts/web'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the pdf-annotate.js packa
ge,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ./scripts/web
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs pdf-annotate.js
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls pdf-annotate.js
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request

see more examples link does not work

I get 404 not found :(

Comments don't seem to work on annotation layer

Hello.

I'm still trying to set this plugin up on my website, but everytime I solve a problem, another one shows up.

I don't know if it's the expected behavior, but I can't see any comments in the annotation layer. The page only shows the comment image, but no text appears inside of it, or when mouse over triggers or in the comments column to the right.

I don't think this should be normal.

ability to edit the annotion

Hi,
Is there any option to edit the existing annotation.
Thanks

Does this lib have Typings?

Is there Typings available for pdf-annotate.js ? I would like to use it in a Angular4 /Typescript based project.

Thanks in advance.

How to generate minified version from web pack

Sorry to put this in issue

How to generate minified version from web pack

Thanks in advance

PDFJSAnnotate.setStoreAdapter is undefined

Contrary to the documentation, it seems the way to set the store adapter for now is PDFJSAnnotate.StoreAdapter = storeAdapter

Not working in mobile application

Hii the app doesnt recongise the touch events from mobile... can this plugin be used to touch devices???

Cannot GET /

After running npm install/npm start and going to localhost:8080, I get the above message.

Potentially relevant messages from npm install:

npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: to-iso-string has been deprecated, use @segment/to-iso-string instead.
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

[email protected] install ~/pdf-annotate.js/node_modules/fsevents
node-pre-gyp install --fallback-to-build

[fsevents] Success: "~/pdf-annotate.js/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" is installed via remote

Potentially relevant messages from npm start:

[email protected] start ~/pdf-annotate.js
./scripts/web

http://localhost:8080/
webpack result is served from /
content is served from /pdf-annotate.js/web
[BABEL] Note: The code generator has deoptimised the styling of "/pdf-annotate.js/dist/pdf-annotate.js" as it exceeds the max of "100KB".

download

how to download annoted pdf file??? i cant able to download annoted pdf file

PDF file gets displayed incorrectly

Hi.

I've just cloned and installed via npm the application and I faced this issue within /scripts/web when trying to start the application (#24) running on Windows 10 OS. I solved it according to the explanation, but don't know if that has something to do with my current problem.

The fact is that when I start the application, the first page of the pdf gets displayed correctly, but the other ones become a mess of overlaid layers.

Can anyone provide some clue about what might be happening here?

importing best practice

would we import the library by importing from the dist folder?
import PDFJSAnnotate from 'pdf-annotate.js/dist/pdf-annotate'

because the package file specifies index.js as main
index.js points to src/PDFJSAnnotate

npm install report pdf-text-js undefined

npm ERR! git clone --template=C:\Users\Administrator\AppData\Roaming\npm-cache_
git-remotes_templates --mirror [email protected]:mzabriskie/pdf-text.js.git C:\Use
rs\Administrator\AppData\Roaming\npm-cache_git-remotes\git-github-com-mzabriski
e-pdf-text-js-git-ce2be974: undefined
npm ERR! git clone --template=C:\Users\Administrator\AppData\Roaming\npm-cache_
git-remotes_templates --mirror [email protected]:mzabriskie/pdf-text.js.git C:\Use
rs\Administrator\AppData\Roaming\npm-cache_git-remotes\git-github-com-mzabriski
e-pdf-text-js-git-ce2be974: undefined
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs
node_modules\npm\bin\npm-cli.js" "install"
npm ERR! node v6.2.0
npm ERR! npm v3.8.9
npm ERR! code ENOGIT

annotation across page boundry

PDFJS and this package are both page centric in their API. I have need of creating annotations (always highlights) where the text might span a page boundry. I don't believe the current implementation will handle this property. What land mines should I be aware of as I look to branch to enable support. I am JS simpleton so if you respond, please dumb it down for me.

Thanks

Uncaught ReferenceError: PDFJS is not defined

when i clone pdf-annotate
do npm install and run npm start,
when i go to:
localhost:8080/index

The console will output:
Uncaught ReferenceError: PDFJS is not defined
PDFJS.workerSrc = './shared/pdf.worker.js';

Annotation Printing

Hello,

Great work done by @mzabriskie, @aaronshaf and team.

I just looked at the documentation but couldn't find anything about printing the annotations. Is there a way to print the annotations along with the PDF itself?

Unclear License

I did not find any license in this repository. I would like to use some of this code, but I need to know, if I am allowed to do this in a commercial software.

To get it to work in IE

Not really an Issue, sorry, kinda new to this github thing. Just something that could save others some nerves.
Anyway, to get it to work in IE, you must first ensure that it actually does not run in IE 7/8 mode by setting the correct doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">`

Additionally, IE requires two Polyfills:

//collection of polyfills for IE
//https://tc39.github.io/ecma262/#sec-array.prototype.includes
if (!Array.prototype.includes) {
	Object.defineProperty(Array.prototype, 'includes', {
		value: function(searchElement, fromIndex) {

			// 1. Let O be ? ToObject(this value).
			if (this == null) {
				throw new TypeError('"this" is null or not defined');
			}

			var o = Object(this);

			// 2. Let len be ? ToLength(? Get(O, "length")).
			var len = o.length >>> 0;

			// 3. If len is 0, return false.
			if (len === 0) {
				return false;
			}

			// 4. Let n be ? ToInteger(fromIndex).
			//    (If fromIndex is undefined, this step produces the value 0.)
			var n = fromIndex | 0;

			// 5. If n ≥ 0, then
			//  a. Let k be n.
			// 6. Else n < 0,
			//  a. Let k be len + n.
			//  b. If k < 0, let k be 0.
			var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

			function sameValueZero(x, y) {
				return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
			}

			// 7. Repeat, while k < len
			while (k < len) {
				// a. Let elementK be the result of ? Get(O, ! ToString(k)).
				// b. If SameValueZero(searchElement, elementK) is true, return true.
				// c. Increase k by 1. 
				if (sameValueZero(o[k], searchElement)) {
					return true;
				}
				k++;
			}

			// 8. Return false
			return false;
		}
	});
}

if (!Object.assign) {
	Object.defineProperty(Object, 'assign', {
		enumerable: false,
		configurable: true,
		writable: true,
		value: function(target, firstSource) {
			if (target === undefined || target === null) {
				throw new TypeError('Cannot convert first argument to object');
			}

			var to = Object(target);
			for (var i = 1; i < arguments.length; i++) {
				var nextSource = arguments[i];
				if (nextSource === undefined || nextSource === null) {
					continue;
				}

				var keysArray = Object.keys(Object(nextSource));
				for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
					var nextKey = keysArray[nextIndex];
					var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
					if (desc !== undefined && desc.enumerable) {
						to[nextKey] = nextSource[nextKey];
					}
				}
			}
			return to;
		}
	});
}

Where the Text node for the SVG is made,

text.innerHTML = a.content;
must be replaced by

var textNode = document.createTextNode(a.content); text.appendChild(textNode);

(I sent a pull request for this already, but as said, new to Git, maybe I made an error)

How to build the project?

Hello,

I would like to know how to build this project for production. Because npm build does work for me. I am using windows 10.

Error: PDFJS.DefaultTextLayerFactory is not a constructor

Hi,
I'm trying pdf-annotate for an Angular 2 application.
I'm getting an error when executing UI.renderPage(1, RENDER_OPTIONS) with these options :

const RENDER_OPTIONS = { documentId: this.url, pdfDocument: null, scale: 1, rotate: 0 };

PDF URL is : url = '../../assets/ressources/testPDF2.pdf';

And using local storage for test purposes PDFJSAnnotate.setStoreAdapter(new PDFJSAnnotate.LocalStoreAdapter());

EXCEPTION: Uncaught (in promise): TypeError: PDFJS.DefaultTextLayerFactory is not a constructor.

Any help would be appreciated. Thanks !

Cannot select shape and text in Firefox and Safari

Problem

Cannot select shape and text using cursor tool. Thus there's no way to move or delete the annotations.

Steps to replicate

1. Go to http://instructure.github.io/pdf-annotate.js/
2. Draw something with rectangle/free draw tool
3. Try to use cursor tool to select the shape/text. This is where it fails

Affected Browsers

• Firefox
• Safari

I found no problem with Chrome and Edge

How to Upload and show pdf file

optionally include annotations on page render

It would be nice if, when rendering a page, we can bypass annotations all together.

Create Circle and Arrow and Draw

Integrating pdf-annotate.js with FPDI and TCPDF

Hello.

This is not an issue of pdf-annotate, but someone may have a solution.

I've just integrated pdf-annotate.js on my website, I'm using my database to store/retrieve annotations and I added the functionality for downloading that annotated document.

To do so, I use FPDI for parsing the PDF and TCPDF for adding the annotations. I accomplished the integration between these 2 libraries following this tutorial: https://www.setasign.com/products/fpdi/demos/tcpdf-demo/.

The problem comes when I try to place the pdf-annotate.js annotation inside the document. Annotations get generated with some X and Y coordinates, but when I use them in TCPDF's method $pdf->Annotate(x, y, ...), the resulting location differs widely from the original one.

Does anyone have a solution for this?
Thanks.

cannot npm start Please help

[email protected] start /home/kowdy/Desktop/pdf-annotate.js
./scripts/web

events.js:160
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 127.0.0.1:8080
at Object.exports._errnoException (util.js:1022:11)
at exports._exceptionWithHostPort (util.js:1045:20)
at Server._listen2 (net.js:1259:14)
at listen (net.js:1295:10)
at net.js:1405:9
at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:81:10)

npm ERR! Linux 4.4.0-53-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: ./scripts/web
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script './scripts/web'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the pdf-annotate.js package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ./scripts/web
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs pdf-annotate.js
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls pdf-annotate.js
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/kowdy/Desktop/pdf-annotate.js/npm-debug.log

Touch / iPad support?

Touch / iPad support?

renderScreenReaderHints errors when annotations are null

renderScreenReaderHints assumes annotations is an iterable which breaks when annotations are null.

(Fixed by #57) Demo page render PDF incorrectly

The demo site http://instructure.github.io/pdf-annotate.js/ rendered the PDF incorrectly as shown in the screen capture. It is expected to show the same content as https://mozilla.github.io/pdf.js/web/viewer.html .

Why is that?

Is it possible to upgrade pdf.js to the latest version?

can i use PDFJS.PDFLinkService?

can i use that service with pfd-annotate

How to Download annotate PDF ?

After adding certain annotation, how to download annotate pdf,
Thanks in advance

Resize Annonate

How to make and area or circle or any annotate resizable , How do i make it drag from edges or corner point to resize it, Thanks.

Upside down / wonky pdf rendering

On load, the first page loads upside down and then on scroll, pages load upside down and/or wonky. Also no unloading method for larger documents.

Will look into fixing this to submit a PR

Putting the toolbar inside a context menu

Hey there.

I need to hide annotations toolbar and put it inside a context menu that gets showed up when the user right-clicks the document.

Has anyone done it?

A better readme

Hi,

Nuxeo Platform makes use of pdf.js for the viewer and we are currently looking for adding annotation support to our viewer. Would it be possible that you develop a little bit more your readme to expose your objectives and current status, and write down a way to test what you have already done. Maybe then we could evaluate and maybe fork to help within next months. Thank you !

Scroll doesn't render pages correctly

Scroll doesn't render pages correctly, I tried a branch that seems to attempt to fix the problem by running a debounce function around the scroll listener, but it just seems to make it more clunky.

So I thought why try and re-invent the wheel ? I've started some work to integrate pdf-annotate-js with PDFJS.PDFViewer by listening for it's and do the Annotation rendering / work on top of the PDFViewer that ships with pdfjs-dist.

I'm curious, has anyone else had these issues and are there any further thoughts on doing it this way ?

File shows corrupted

I'm loading an example pdf which looks fine in all readers, but is adding messy content. Im attaching a screenshot of the result. The original only has one page

Developing steps not working in Windows Environment

Hi,

Thank you so much for this library 👍., Developing steps not working in windows environment. Could you please help how to solve this? here is errors i am getting :

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v4.4.7
npm ERR! npm v3.10.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: ./scripts/web
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script './scripts/web'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the pdf-annotate.js package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ./scripts/web
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs pdf-annotate.js
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls pdf-annotate.js
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Satish\Favorites\Downloads\npm-master\pdf-annotate.js\npm-debug.log

How to make use of bundle output with ES5 current Application

Hi,
Sorry to put this in issue,

I am using Client side scripting framework called as Angular 1.x, ES5 based Code Style,

How do i make use of pdf-annotate web pack build to my angular controller or in ES5 Application.

Thanks in Advance

Saving edited pdf file

How can I save the edited PDF file to local storage or send it as base64/byte[] or something using REST?

messy content in pdf

I'm loading a pdf, first page looks fine and rest pages in messy content.

Text overlap & Call rest apis to get and restore annotation

Hi @instructure,
I'm using pdf-annotate.js for annotating the pdf but i'm facing the below issues while using it:

1. There are text overlaps while scrolling the open pdf so pdf dosen't look good.
2. I want to call rest api to store and restore the annotations because i want to store annotations into database.But i'm not able to find the way how can i call rest apis.

Also,i have one questions about the usage how can i use this library in angular 2?

resizable rect area

How to go about making the rect area resizable, currently it is only draggable. I also want to be able to drag its edges/corners to resize it. Has anyone implemented this successfully ?

Problems installing and running

I'm running node.js on windows. I'm a newbie, but competent programmer in other areas. When I install this package and try to start it I get the following error:

> [email protected] start D:\Dev\pdf-annotate.js
> ./scripts/web
'.' is not recognized as an internal or external command,
operable program or batch file.

The error is due to the value in package.json under scrpts > start which has value './scripts/web'.

But I am at a loss how to fix this. Tried all sorts of variations, but even a successful calling of the target file (if I move it to the root directory and repoint packages.json) fails for other reasons apparently due to failure to recognize and execute bash commands correctly.

as an alternative, I tried installing pdf.js project as per their instructions, and that was easy. So something needs to be fixed on the instructions here because its not working for me.

Any assistance welcome. Probably really simple, but as I said I am a node.js newb.

Getting Started

Sorry to put this in the issues - Is there a guide to getting started? I see the example with index.html but it does not render the example.pdf. Help!

Rotating and then annotating

When I load docs/index.html , if I rotate example.pdf, and then try to use any of the annotation tools, they don't work correctly. If you try to use the pen tool for example, it will draw in the wrong direction, and not under your mouse.

This is presumably caused by the drawing tools not knowing that pdf has been rotated.

Creating annotations on pdf.js with javascript

I want to annotate pdf using pdf.js. Is there any solution for this as I am not using node.js

Is this project cross-browser compatible?

I opened this project with IE and some features are not working. Example: Highlight. Any clue on how to fix this?

npm not start and its going to be error

Hello team
i am recently trying to execute the code and run , but their some error i found when i install the npm.
Please give some light to me how to execute the file.