NAV
javascript

Nota Viewer Reference (js API)

Introduction

Nota Viewer is a React-based client side JavaScript library for rendering PDF documents inside a browser and providing controls to perform annotation within the PDF document. Although it is a React-based component, it can be hosted within any type of web application.

Download

nota-viewer-1.0.4-SNAPSHOT.zip

Browser Support

Chrome.

Versioning

This library is also available as an NPM package. NPM provides facilities to upgrade as new versions are released.

Troubleshooting

Email us at support@language.ai.

Getting Started

When you download the Nota Viewer JavaScript library, you will find two sample web pages to demonstrate usage. The sample web pages need to be served by an HTTP server to be able to connect to Nota Backend. Instructions can be found in the Readme file.

Instantiate

The authorizationToken and projectID will be provided to you, although you may use the Nota API to create new projects.

Attribute Type Description
notaViewerID integer Unique key of your choice to identify this component to subsequent method calls
apiUrl string Url to the Nota API, provided by Nota
authorizationToken string API key, provided by Nota
projectID string Project identifier, provided by Nota
pdfLink path Reference to JavaScript file needed by component
className string CSS class name that will be rendered on the outer div of the component to give you flexibility in styling and layout.
width string Width of the outer div of the rendered component.
height string Height of the outer div of the rendered component.

Example code:

 notaviewer.main(notaViewerID, 
    apiUrl, 
    authorizationToken, 
    projectID, 
    "js/pdf.worker.js", 
    "nota-viewer", 
    "98%", 
    "85%");

Initialize

Example code:

notaviewer.addInitializationListener(notaViewerID, function(initResult) {
    console.log("instance " + notaViewerID + " is ready!")
    console.log(initResult);
});

Register a callback to be fired once the Nota Viewer component has fully initialized.

Load a Document

Example code:

notaviewer.openDocument(notaViewerID, documentID, function(openResult) {
    console.log("successfully opened document!");
})

This method will open a PDF document within the Nota Viewer. Document IDs can be obtained using the Nota API document resource

Annotating

Example code:

function first(obj) {
    for (var a in obj) return a;
}
function addAnnotation(result) {
    var annotationTypeID = first(notaviewer.getSchema(notaViewerID));
    console.log("applying annotation: " + annotationTypeID);
    notaviewer.addAnnotation(notaViewerID, annotationTypeID, "", function(result) {console.log("add annotation callback: ", result)});
}

function deleteAnnotation(result) {
    var selectedAnnotationID = notaviewer.getSelectedAnnotationID(notaViewerID);
    notaviewer.deleteAnnotation(notaViewerID, selectedAnnotationID, function(result) {console.log("delete annotation callback: ", result)});
}

function selectAnnotation(input) {
    notaviewer.selectAnnotation(notaViewerID, input.value, function(result) {console.log("select annotation callback: ", result)});
}

This code demonstrates adding, removing and selecting annotations within the loaded PDF document. The addAnnotation function will apply to the browser’s current text selection.

Events

This section describes all the callback functions that can be registered with Nota Viewer to be fired when specific events occur.

Initialization

As described above, this event will fire when the Nota Viewer component has fully initialized which means you are free to start loading documents and annotating.

Example code:

notaviewer.addInitializationListener(notaViewerID, function(initResult) {
    console.log("instance " + notaViewerID + " is ready!")
    console.log(initResult);
});

Text Selection

This event will fire when the user has selected (or unselected) text within a PDF. This event can be used to open a modal dialog to provide a more customized annotation experience.

Example code:

notaviewer.addTextSelectionListener(notaViewerID, 
    function(textSelectionData) {
        console.log("text selection: " + textSelectionData.text)
    });

Add Annotation

This event will fire when an annotation has been successfully created within the system.

Example code:

notaviewer.addAnnotationSelectionListener(notaViewerID, function(annotationID) {
    document.getElementById("selectedAnnotationIDInput").value = annotationID;
});

Remove Annotation

This event will fire when an annotation has been successfully deleted within the system.

Example code:

notaviewer.addAnnotationDeletionListener(notaViewerID, function(annotationID) {
    console.log("annotation deleted: " + annotationID)
});

Toolbar

The Nota Viewer component does not render a toolbar by default but it does provide the methods so that you can render a customized toolbar.

Pagination

This code demonstrates how to wire up page forward, page back and jump to page buttons.

Example code:

function setPageNumCallback(result) {
    document.getElementById("pageNumInput").value = result.state["page-num"];
}

function prevPage() {
    notaviewer.setPageNum(notaViewerID,
        notaviewer.getPageNum(notaViewerID) - 1, 
        setPageNumCallback);
}

function nextPage() {
    notaviewer.setPageNum(notaViewerID,
        notaviewer.getPageNum(notaViewerID) + 1, 
        setPageNumCallback);
}

function setPage(input) {
    var newPageNum = parseInt(input.value);
    if (newPageNum) {
        notaviewer.setPageNum(notaViewerID, newPageNum, setPageNumCallback);
    }
}

Zoom

This code demonstrates how to implement zoom in and zoom out.

Example code:

function setScaleCallback(result) {
    document.getElementById("scaleSpan").textContent = ''+result.state["scale"];
}

function increaseScale() {
    notaviewer.setScale(notaViewerID,notaviewer.getScale(notaViewerID) * 1.1, setScaleCallback);
}
function decreaseScale() {
    notaviewer.setScale(notaViewerID,notaviewer.getScale(notaViewerID) * 0.9, setScaleCallback);
}

Scrolling

Nota Viewer supports scrolling to a given annotation.

Example code:

notaviewer.scrollToAnnotation(notaViewerID, annotationID, function(result) {
    setPageNumCallback(result);
});