Welcome to the API documentation for the PDFTron Webviewer Collaboration Client module.
CollabClient - The root level class that must be instantiated to enable realtime collaboration. The main purpose of this class is to log in a user.
User - A user class returned from the login methods on CollabClient. This class is used to create documents, fetch documents, etc.
Document - A class representing a single document. Instances of this class can be used to view a document, create Snapshots, invite users, etc.
Annotation - A class representing a single annotation belonging to a Document. Instances of this class are used to fetch Mentions and track unread state.
Mention - A class representing an "@" mention of a user. This class is closely tied to Annotations.
Snapshot - A class representing the state of a document at a certain period of time. Used to implement features like versioning. A snapshot can be used to preview a document at a previous state, and even revert a document to that state.
The client API is strongly event driven - the API provides all of the events you need to build a reactive UI.
You can subscribe to a variety of global events on CollabClient.EventManager.
For example, you can subscribe to an event that is triggered whenever a user creates an annotation:
client.EventManager.subscribe('annotationAdded', (annotation) => {
console.log('annotationAdded', annotation)
})
Each entity class also has events you can subscribe to for entity specific events. To see what events are emitted, look at the "subscribe" function on each entity
client.EventManager.subscribe('annotationAdded', (annotation) => {
annotation.subscribe('onChange', (updatedAnnotation) => {
console.log('annotation changed', updatedAnnotation)
})
})
The standard flow for the client API is:
import { CollabClient } from '@pdftron/collab-client'
import WebViewer from '@pdftron/webviewer';
WebViewer({
...options
}, element).then(async (instance) => {
const client = new CollabClient({
instance,
url: 'http://localhost:3000/',
subscriptionUrl: 'ws://localhost:3000/subscribe',
});
const user = await client.loginAnonymously("Guest");
const documents = await user.getAllDocuments();
// Load a document by default
if(documents.length > 0) {
const document = documents[0]
await document.view(`http://mywebsite.com/documents/${document.id}.pdf`)
}
// Create a document from an HTML file input
const filePickerInput = document.getElementById('file-picker');
filePickerInput.onchange = (e) => {
const file = e.target.files[0];
const document = await user.createDocument({
document: file,
isPublic: true,
name: file.name
});
await document.view(`http://mywebsite.com/documents/${document.id}.pdf`);
}
})
Generated using TypeDoc