Class DsPdfViewer

Gets the viewer instance using the host element or host element selector

Example

var viewer = DsPdfViewer.findControl("#root");

Adds an annotation to a specified page.

• This method uses a lock to ensure that the annotation is added synchronously preventing concurrent modifications.
• Requires SupportApi.

Returns

• A promise resolving to an object containing the page index and the added annotation.

Example

// Add the Square annotation to the first page when you open the document:
viewer.onAfterOpen.register(function() {
   viewer.addAnnotation(0, {
       annotationType: 5, // AnnotationTypeCode.SQUARE
       subtype: "Square",
       borderStyle: { width: 5, style: 1 },
       color: [0, 0, 0],
       interiorColor: [255, 0, 0],
       rect: [0, 0, 200, 200]
    });
});

Example

// Below is the sample how to copy field with name "field1" and put it to the second page programmatically:
// Find field widget with name field1:
var resultData = await viewer.findAnnotation("field1", {findField: 'fieldName'});
// Clone field:
var clonedField = viewer.cloneAnnotation(resultData[0].annotation);
// Change field name property:
clonedField.fieldName = "field1Copy";
// Add cloned field to the second page.
viewer.addAnnotation(1, clonedField);

Example

// Add the FileAttachment annotation to the first page when you open the document:
viewer.onAfterOpen.register(function() {
   viewer.addAnnotation(0, {
       annotationType: 17, // AnnotationTypeCode.FILEATTACHMENT
       subtype: "FileAttachment",
       file: {
         filename: 'attachment.png',
         content: new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,45,0,0,0,32,8,6,0,0,0,134,132,241,68,0,0,0,4,103,65,77,65,0,0,177,143,11,252,97,5,0,0,7,56,73,68,65,84,88,9,205,88,11,112,92,85,25,254,255,115,179,129,148,36,155,190,147,187,91,228,49,64,25,99,181,105,169,117,176,149,34,99,113,80,65,165,162,118,168,15,44,3,42,99,55,125,8,29,59,221,90,29,132,38,187,43,56,162,22,5,161,206,240,24,64,40,130,15,156,138,226,3,147,14,118,74,219,41,157,102,138,238,166,155,180,105,246,238,210,144,108,238,158,223,239,44,189,233,110,186,217,172,54,64,239,204,206,61,143,255,241,157,255,156,255,251,207,93,166,183,243,185,185,211,55,125,246,69,239,177,136,166,176,150,92,86,185,201,190,244,238,30,10,47,113,79,199,45,159,142,114,41,221,192,93,125,65,62,203,183,92,136,174,99,226,185,144,57,171,80,14,227,57,22,249,155,102,218,46,110,238,177,195,107,38,191,94,56,95,73,123,194,64,207,220,146,156,81,229,171,217,196,164,110,130,99,31,145,116,144,208,14,210,178,155,20,245,137,102,75,20,53,50,211,249,36,124,53,49,205,133,115,87,72,111,29,146,236,247,142,134,166,31,174,4,176,145,153,16,208,118,52,213,194,108,61,13,144,141,48,248,184,43,58,150,108,245,255,179,28,8,187,189,111,150,178,170,215,65,231,102,44])
       },
       rect: [0, 0, 20, 20]
    });
});

Add annotation editor panel. Requires SupportApi.

Example

viewer.addAnnotationEditorPanel();

Add articles panel.

Example

viewer.addArticlesPanel();

Add attachments panel.

Example

viewer.addAttachmentsPanel();

Add default set of sidebar panels with default order: 'Thumbnails', 'Search', 'Outline', 'Layers', 'StructureTree', 'Attachments'

Example

viewer.addDefaultPanels();

Adds document list panel to the Viewer with available document array specified in documentslist.json file (URL specified by documentListUrl option), located in the root directory of your application. You can specify service at the end point for documentListUrl option. The service should return JSON string with available documents array, e.g.: ["pdf1.pdf", "pdf2.pdf"]

Example

Example content for the documentslist.json file:

["file1.pdf", "file2.pdf"].

Example

var viewer = new DsPdfViewer("#root", { documentListUrl: "/documentslist.json" });
viewer.addDocumentListPanel();

Example

var viewer = new DsPdfViewer("#root");
// Add document list panel and specify documentListUrl option:
viewer.addDocumentListPanel('/documentslist.json');

Example

var viewer = new DsPdfViewer("#root");
// Add document list panel and specify documentListUrl option using DATA URI:
viewer.addDocumentListPanel('data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}]');

Add form editor panel. Requires SupportApi.

Example

 var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
 viewer.addDefaultPanels();
 viewer.addFormEditorPanel();

Add optional content layers panel.

Example

viewer.addLayersPanel();

Add outline panel.

Example

viewer.addOutlinePanel();

Enable the Text Annotation Reply Tool. Note, in order to enable ability to edit/remove or add existing replies you need to configure SupportApi, otherwise the Reply Tool will be in read-only mode.

Example

viewer.addReplyTool('expanded');

Add Search panel.

Example

viewer.addSearchPanel();

Add a panel with a list of shared documents.

Example

var viewer = new DsPdfViewer("#root");
viewer.addSharedDocumentsPanel();

Add stamp annotation.

Example

// Add Graphical signature to the PDF using external image
function addStampFromUrl(imageUrl, viewer) {
 * fetch(imageUrl)
 .then(response => response.blob())
 .then(blob => blob.arrayBuffer())
 .then(arrayBuffer => {
       const fileId = new Date().getTime() + ".png";
       const fileName = fileId;
       const pageIndex = 0;
       const imageData = new Uint8Array(arrayBuffer);
       const rect = [0, 0, 200, 200];
       
       viewer.storage.setItem(fileId, imageData);
       viewer.addStamp(
                   imageData,
                   {
                       fileId,
                       fileName,
                       pageIndex,
                       rect,
                       select: false,
                       subject: "",
                       rotate: 0,
                       convertToContent: false
                   });     
 });
}
// Usage:
addStampFromUrl("http://localhost/image.png", viewer);

Add sticky note to the document. Requires SupportApi.

Example

viewer.addStickyNote(viewer.toViewPortPoint({x: 50, y: 50, pageIndex: 0}));

Add Thumbnails panel

Example

viewer.addThumbnailsPanel();

Adds a css style to the view area.

Returns

style element identifier.

Example

// Enable RTL text direction:
viewer.addViewAreaStyle(".gc-text-content, p, h1 { direction: rtl !important }");

Call this method in order to apply changed options.

Example

viewer.options.zoomByMouseWheel = { always: false, ctrlKey: true, metaKey: true };
viewer.applyOptions();

Call this method in order to apply changes in toolbarLayout.

Example

viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
viewer.applyToolbarLayout();

Example

   var viewer = new DsPdfViewer(document.querySelector("#viewer"));
   viewer.addDefaultPanels();
   var toolbar = viewer.toolbar;
   var toolbarLayout = viewer.toolbarLayout;
   toolbar.addItem({
       key: 'custom-add-stamp',
       icon: { type: "svg", content: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path style="fill: #205F78;" d="M20.25 12l-2.25 2.25 2.25 2.25-3.75 3.75-2.25-2.25-2.25 2.25-2.25-2.25-2.25 2.25-3.75-3.75 2.25-2.25-2.25-2.25 2.25-2.25-2.25-2.25 3.75-3.75 2.25 2.25 2.25-2.25 2.25 2.25 2.25-2.25 3.75 3.75-2.25 2.25 2.25 2.25z"></path></svg>' },
       title: 'Open your document to add a stamp',
       checked: false, enabled: false,
       action: function () { 
         alert("Implement your action here."); 
       },
       onUpdate: function (args) {
           var hasDoc = viewer.hasDocument && args.state.session.pageCount > 0;
           return {
               enabled: hasDoc,
               checked: false,
               title: hasDoc ? 'Add stamp' : 'Open your document to add a stamp'
           }
       }
   });
   toolbarLayout.viewer.default.splice(0, 0, "custom-add-stamp");
   viewer.applyToolbarLayout();

Scales the provided rectangle or coordinate array based on the current viewport scale.

This method accepts either an IGcRect object or an array of coordinates [x1, y1, x2, y2]. It returns the scaled coordinates in the same format as the input.

Note: This method changes the origin of the coordinates from "BottomLeft" (PDF default) to "TopLeft" (canvas default). This transformation makes the coordinates ready for use in drawing on a canvas, for example, in custom highlight rendering.

Returns

• The scaled rectangle or coordinate array, with origin set to "TopLeft".

Example

// Using an IGcRect object
const rect = { x: 100, y: 150, w: 200, h: 100 };
const scaledRect = viewer.applyViewPortScale(rect, 0);
console.log(scaledRect); // { x: scaledX, y: scaledY, w: scaledW, h: scaledH }

Example

// Using an array of coordinates [x1, y1, x2, y2]
const coords = [100, 150, 300, 250];
const scaledCoords = viewer.applyViewPortScale(coords, 0);
console.log(scaledCoords); // [scaledX1, scaledY1, scaledX2, scaledY2]

Deprecated

use expandPanel() instead

This method changes coordinate system origin for rectangle given by parameter bounds and returns converted rectangle value;

Example

var pageIndex = 0;
var topLeftBounds = [0, 0, 200, 40];
// Convert the topLeftBounds from TopLeft origin to BottomLeft origin 
// taking into account the viewport from the first page and store 
// the result in the bottomLeftBounds variable:
var bottomLeftBounds = viewer.changeBoundsOrigin(pageIndex, topLeftBounds, 'TopLeft', 'BottomLeft');

Example

// Gets the bounds of the annotation relative to the viewport:
const pageIndex = 0;
const viewPort = viewer.getViewPort(pageIndex);
const annotationRect = (await viewer.findAnnotation('10R'))[0].annotation.rect;
const invertedRect = viewer.changeBoundsOrigin(pageIndex, annotationRect, 'BottomLeft', 'TopLeft');
const annotationX1 = invertedRect[0] * viewPort.scale;
const annotationY1 = invertedRect[1] * viewPort.scale;
const annotationX2 = invertedRect[2] * viewPort.scale;
const annotationY2 = invertedRect[3] * viewPort.scale;

This method changes coordinate system origin for y coordinate given by parameter y and returns converted value.

Example

var pageIndex = 0;
var y = 0;
// Convert from TopLeft origin to BottomLeft origin
// taking into account the viewport from the first page:
var yBottom = viewer.changeOrigin(pageIndex, y, 'TopLeft', 'BottomLeft');

Converts the origin of the Y coordinate to the bottom.

Example

var pageIndex = 0;
var y = 0;
// Convert y value from TopLeft origin to BottomLeft origin
// taking into account the viewport from the first page:
var yBottom = viewer.changeOriginToBottom(pageIndex, y);

Converts the origin of the Y coordinate to the top.

Example

var pageIndex = 0;
var y = 0;
// Convert y value from BottomLeft origin to TopLeft origin
// taking into account the viewport from the first page:
var yTop = viewer.changeOriginToTop(pageIndex, y);

Clears all highlights from one or more specific pages.

This method removes all custom highlights from the specified pages. You can pass either a single page index or an array of page indices.

Example

// Clear highlights from page 2:
viewer.clearHighlightedSegments(2);

Example

// Clear highlights from pages 1, 3, and 5:
viewer.clearHighlightedSegments([1, 3, 5]);

Clone annotation or field given by parameter annotation. Requires SupportApi.

Example

// Below is the sample how to copy field with name "field1" and put it to the second page programmatically:
// Find field widget with name field1:
var resultData = await viewer.findAnnotation("field1", {findField: 'fieldName'});
// Clone field:
var clonedField = viewer.cloneAnnotation(resultData[0].annotation);
// Change field name property:
clonedField.fieldName = "field1Copy";
// Add cloned field to the second page.
viewer.addAnnotation(1, clonedField);

Closes the currently open document.

Example

await viewer.close();

Closes the side panel.

Example

viewer.closePanel();

Collects quadrilateral points based on the provided PaintedBoxInfo array.

Returns

• Information about selected or highlighted text fragments, including the page index, outer rectangle coordinates, and quadrilateral points.

Description

This method takes an array of PaintedBoxInfo objects, where each object contains information about a painted box on a PDF page. It calculates the outer rectangle coordinates and quadrilateral points for the selected or highlighted text fragments. The coordinates have their origin at the bottom-left corner as per PDF specifications.

The quadPoints array is sorted as follows: [{ x: minX, y: maxY }, { x: maxX, y: maxY }, { x: minX, y: minY }, { x: maxX, y: minY }]

Display confirmation dialog.

Example

const confirmResult = await viewer.confirm("Apply changes?", "info", "Confirm action", ["Yes", "No", "Cancel"]);
if (confirmResult === "Yes") {
  // put your code here
} else if (confirmResult === "No") {
  // put your code here
} else {
  // put your code here
}      

Converts PDF rectangle or PDF point coordinates to absolute window coordinates.

Returns

Array of window coordinates corresponding to the given PDF coordinates.

Throws

Error if the coordinates format is incorrect. Expected either [x, y] or [x1, y1, x2, y2].

Delete page. Requires SupportApi.

Example

// Delete page with index 3.
viewer.deletePage(3);

Use this method to close and release resources occupied by the DsPdfViewer.

Downloads the PDF document loaded in the Viewer to the local disk.

Example

viewer.download();

Execute Copy action (Ctrl + C shortcut). Requires SupportApi.

Example

viewer.execCopyAction();

Execute Cut action (Ctrl + X shortcut). Requires SupportApi.

Example

viewer.execCutAction();

Execute Delete action (DEL shortcut). Requires SupportApi.

Example

viewer.execDeleteAction();

Execute Paste action (Ctrl + V shortcut). Requires SupportApi.

Example

if(viewer.hasCopyData) {
  viewer.execPasteAction({x: 10, y: 10, pageIndex: 0});
}

Starts long-running operation and displays progress window while operation is running.

Find annotation(s) within opened document. Returns promise which will be resolved with search results.

Example

// Find annotation with id '2R':
viewer.findAnnotations("2R").then(function(dataArray) {
  if(dataArray[0])
    alert(`Annotation ${dataArray[0].annotation.id} found on page with index ${dataArray[0].pageIndex}.`);
  else
    alert('Annotation not found.');
});

Example

// find all fields with name field1:
viewer.findAnnotations("field1", {findField: 'fieldName', findAll: true}).then(function(dataArray) {

});

Gets meta data information for the current document.

Example

const docMetaInfo = await viewer.getDocumentInformation();

Gets security information for the current document.

Example

const docSecurityInfo = await viewer.getDocumentSecurity();

Get event object.

Example

viewer.getEvent("BeforeAddAnnotation").register(function(args) {
  console.log(args);
});
viewer.getEvent("AfterAddAnnotation").register(function(args) {
    console.log(args);
});

Returns position of the page view relative to the browser window.

Example

var pageLocation = viewer.getPageLocation(0);
console.log('The first page location is ' + location.x + ', ' + location.y);

Example

// Draws a red rectangle over the annotation with id "10R".
(async function(viewer, annotationId) {
  const pageLocation = viewer.getPageLocation(0), viewPort = viewer.getViewPort(0), 
    scale = viewPort.scale, viewBox = viewPort.viewBox;
  const rect = (await viewer.findAnnotation(annotationId))[0].annotation.rect;
  const x1 = rect[0] * scale + pageLocation.x, x2 = rect[2] * scale + pageLocation.x,
    y1 = (viewBox[3] - rect[3]) * scale + pageLocation.y, y2 = (viewBox[3] - rect[1]) * scale + pageLocation.y;
  const div = document.createElement('div');
  div.style.position = 'absolute'; 
  div.style.left = `${x1}px`; div.style.top = `${y1}px`;
  div.style.width = `${x2 - x1}px`; div.style.height = `${y2 - y1}px`;
  div.style.border = '1px solid red';
  document.body.appendChild(div);
})(viewer, "10R");

Example

// Add text annotation on mouse click
document.addEventListener("click", (e) => {
  const target = (e["path"] || (e["composedPath"] && e["composedPath"]()) || [])[0] || e.target, page = target.closest(".page"); 
  if(target.closest(".gc-annotation")) 
    return;
  if(page) {	
    const pageIndex = page.getAttribute("data-index") * 1, pageLoc = viewer.getPageLocation(pageIndex), scale = viewer.getViewPort(pageIndex).scale;
    const x = (e.clientX - pageLoc.x) / scale, y = (e.clientY - pageLoc.y) / scale;	
    const rect = viewer.changeBoundsOrigin(pageIndex, [x, y, x + 20, y + 20], "TopLeft", "BottomLeft");
    viewer.addAnnotation(pageIndex, { annotationType: 1 , contents: "Text annotation content", rect });
  }  
});

Get the page rotation value.

Example

// Get the first page rotation value:
var rotation = viewer.getPageRotation(0);

Returns the page size. By default, return size without scale, pass true for the includeScale argument if you want to get the scaled value.

Example

// Get first page size:
var pageSize = viewer.getPageSize(0);

Get page annotations tabs order. A name specifying the tab order that shall be used for annotations on the page. Possible values are: R - Row order. C - Column order. S - Structure order (not supported by DsPdfViewer). A - Annotations order. This order refers to the order of annotation in the annotations collection. W - Widgets order . This order uses the same ordering as "Annotations" order, but two passes are made, the first only picking the widget annotations and the second picking all other annotations.

Gets the current panel state.

Returns the contents of the text selection.

Example

alert("Text selected by the user: " + viewer.getSelectedText());

Returns a list of shared documents available to the current user.

Example

var sharedDocuments = await viewer.getSharedDocuments();

Get information about signature used in document.

Example

// Example: check if the current document is signed and show information about signature:
var viewer = DsPdfViewer.findControl("#root");
const signatureInfo = await viewer.getSignatureInfo();
if(signatureInfo.signed) {
  const signatureValue = signatureInfo.signedByFields[0].signatureValue;
  const signerName = signatureValue.name;
  const location = signatureValue.location;
  const signDate = viewer.pdfStringToDate(signatureValue.modificationDate);
  alert("The document was signed using digital signature. Signed by: " + signerName + ", location: " + location + ", sign date: " + signDate.toString());
} else {
  alert("The document is not signed.");
}

Returns PDF page view port information.

Returns

Object containing following fields: { viewBox: // Original page bounds: [x1, y1, x2, y2]. // If you want to know original page's width/height, you can get it using viewBox values: // var pageWidth = viewBox[2] - viewBox[0]; // var pageHeight = viewBox[3] - viewBox[1]; width: // Current width of the page in user space (scale and rotation values are applied), height: // Current height of the page in user space (scale and rotation values are applied) scale: // Active scale value rotation: // Active rotation value }

Example

// Get the viewport object for the first page:
var viewPort = viewer.getViewPort(0);

Move back in the document history.

Move forward in the document history.

Go to the first page.

Example

viewer.goToFirstPage();

Go to the last page.

Example

viewer.goToLastPage();

Go to the next page.

Example

viewer.goToNextPage();

Go to the page with the specific page index.

Since

2.3.1

Example

// Go to the first page:
viewer.goToPage(0);

Go to the page with the specific page number (numbering starts at 1).

Deprecated

Method goToPageNumber deprecated since version 2.3.1, use goToPage method or pageIndex property instead.

Example

// Go to the second page:
viewer.goToPageNumber(2);

Go to the previous page.

Example

viewer.goToPrevPage();

Hide second toolbar.

Example

viewer.hideSecondToolbar();

Navigates to a page containing the result and highlights found text.

Highlights a portion of text on a specified page.

This method creates a highlight for a segment of text on a page, with customizable properties. Optionally, it can clear previous highlights before adding the new one and skip the immediate repainting of the text layer.

Returns

A promise that resolves once the highlight has been added and optionally the text layer has been repainted.

Example

// Add a highlight for a text segment from index 10 to 20 on page 0, with custom color and border, and clear existing highlights:
await viewer.highlightTextSegment(0, 10, 20, { color: 'rgba(255, 255, 0, 0.5)', borderColor: 'rgba(255, 0, 0, 0.75)', borderWidth: 3, clearPrevious: true });

Example

// Add a highlight and skip the immediate repaint of the text layer:
await viewer.highlightTextSegment(0, 10, 20, { color: '#00FF00', skipPaint: true });
// Repaint the text layer manually:
viewer.repaintTextLayer(0);

Ensures that all visual child elements of the viewer are properly updated for layout. Call this method to update the size of the inner content when the viewer is dynamically resized.

Example

viewer.eventBus.on("viewersizechanged", function() {
  // Make viewer height equal to content height of inner pages, including the margins:
  document.querySelector("#root").style.height = viewer.pageCount * 50 + viewer.pageCount * viewer.getPageSize(0, true).height + "px";
  // Invalidate layout:
  viewer.invalidate();
});

Checks if a font with the given URL is registered.

Returns

• Returns true if a font with the given URL is registered, false otherwise.

Orders and filters panel items. '*' indicates "the rest of panels". 'sep'/'separator' indicated menu separator.

Loads the report (no UI), so caller has to process load result and report error if any.

The method loads the page at the index specified by the pageIndex parameter, and scrolls the page into the view.

Returns

Returns the boolean promise that resolves when the page is fully loaded (including text and annotation layers) and scrolled. A promise is resolved with false value when the page does not exist or an error occurs, otherwise the promise is resolved with true value.

Example

// Load and display the first page:
viewer.loadAndScrollPageIntoView(0);

Load an updated document list into document list panel.

Example

viewer.loadDocumentList();

Example

// Load document list using DATA URI:
viewer.loadDocumentList('data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "doc 2", "title": "title 2"}]');

Loads the updated list of shared documents into the shared documents panel.

Example

viewer.loadSharedDocuments();

Lock annotation for editing.

Marks the annotation layer as dirty for specific page index or indices. This method triggers the need for re-rendering the annotation layer in the page view due to changes in annotation data for the specified page index or indices.

Example

// Example: Mark annotation layers for the first and third pages as dirty:
viewer.markAnnotationLayerDirty([0, 2]);