Some test text!

menu
Migrating to v6keyboard_arrow_down

Migrating to V6 of WebViewer

There are a few breaking changes when migrating to v6 from older versions.

linkNo more jQuery

CoreControls.js is no longer dependent on jQuery, thus all APIs that use jQuery are changed.

linkEvent handling

The jQuery e isn't passed to event handlers as the first argument anymore. The imported property for annotationChanged is now accessible on the third argument.

// Version 5.x and older
docViewer.on('zoomUpdated', (e, zoom) => {
  ...
});
annotManager.on('annotationChanged', (e, annotations, action) => {
  if (e.imported) {
    ...
  }
});

// Version 6.0 and after
docViewer.on('zoomUpdated', zoom => {
  ...
});
annotManager.on('annotationChanged', (annotations, action, { imported }) => {
  if (imported) {
    ...
  }
});

linkCreateInnerElement

The innerElement of all widget annotations is now a normal DOM element instead of a jQuery wrapped element. This means that createInnerElement should return a normal DOM element now.

// Version 5.x and older
Annotation.SignatureWidgetAnnotation.prototype.createInnerElement = function() {
  const div = document.createElement('div');

  ...

  return $(div);
}

// Version 6.0 and after
Annotation.SignatureWidgetAnnotation.prototype.createInnerElement = function() {
  const div = document.createElement('div');

  ...

  return div;
}

linkSetSignatureCanvas

It takes a canvas element instead of a jQuery wrapped canvas element.

// Version 5.x and older
const signatureTool = docViewer.getTool('AnnotationCreateSignature');
const canvas = document.createElement('canvas');

signatureTool.setSignatureCanvas($(canvas));


// Version 6.0 and after
const signatureTool = docViewer.getTool('AnnotationCreateSignature');
const canvas = document.createElement('canvas');

signatureTool.setSignatureCanvas(canvas);

linkConfig file

jQuery is no longer accessible inside a config file. The viewerLoaded and documentLoaded events are triggered on the window instead of the wrapped document object now.

// Version 5.x and older
$(document).on('viewerLoaded', () => {
  ...
});
$(document).on('documentLoaded', () => {
  ...
});

// Version 6.0 and after
window.addEventListener('viewerLoaded', () => {
  ...
});
window.addEventListener('documentLoaded', () => {
  ...
});

linkAnnotationManager getAnnotCommand is asynchronous

Previously this API didn't wait for the resources to be loaded for annotations before exporting them, which may result in an empty ImageData property for stamp annotations. Now this API waits for it internally. This API is deprecated in favor of exportAnnotCommand.

// Version 5.x and older
const annots = instance.annotManager.getAnnotationsList();
Promise
  .all(annots.map(annot => annot.resourcesLoaded()))
  .then(() => {
    const xfdfString = annotManager.getAnnotCommand();
  });

// Version 6.0 and after
annotManager.getAnnotCommand().then(xfdfString => {
  ...
});

linkAnnotationManager exportAnnotations is asynchronous

Previously this API didn't wait for the freehand tool to finish drawing before exporting the XFDF, which may result in missing freehand annotations data. It didn't wait for the resources to be loaded as described above. Now the API waits for it internally.

// Version 5.x and older
const freehandTool = docViewer.getTool('AnnotationCreateFreeHand');
const annots = instance.annotManager.getAnnotationsList();
Promise.all([
  ...annots.map(annot => annot.resourcesLoaded()),
  freeHandTool.complete()
]).then(() => {
  // to make sure that freehand annotations will be in the output XFDF.
  const xfdfString = annotManager.exportAnnotations();
});

// Version 6.0 and after
annotManager.exportAnnotations().then(xfdfString => {
  ...
});

linkAnnotationManager importAnnotCommand is asynchronous

// Version 5.x and older
const xfdfString = '...';
const importedAnnotations = annotManager.importAnnotCommand(xfdfString);

// Version 6.0 and after
const xfdfString = '...';
annotManager
  .importAnnotCommand(xfdfString)
  .then(importedAnnotations => {
    ...
  });

linkAnnotationManager importAnnotations is asynchronous

// Version 5.x and older
const xfdfString = '...';
const importedAnnotations = annotManager.importAnnotations(xfdfString);

// Version 6.0 and after
const xfdfString = '...';
annotManager
  .importAnnotations(xfdfString)
  .then(importedAnnotations => {
    ...
  });

linkAnnotationManager importAnnotationsAsync is replaced with importAnnotations

// Version 5.x and older
const xfdfString = '...';
const options = {...};

annotManager.importAnnotationsAsync(
  xfdfString, 
  importedAnnotations => {
    ...
  },
  options,
);

// Version 6.0 and after
annotManager
  .importAnnotations(xfdfString, options)
  .then(importedAnnotations => {
    ...
  });

linkThe Annotations.Annotation Custom property

The Custom property is mainly used to store a custom property to an annotation. Prior to 6.0 you need to extend Annotations.Annotation's serialize and deserialize methods to make sure that this property shows in the exported XFDF. In 6.0 we replace this property with CustomData. The value of it will be serialized to the output XFDF, and even better, be preserved in the downloaded document.

// Version 5.x and older
const serialize = Annotations.Annotation.prototype.serialize;

Annotations.Annotation.prototype.serialize = function() {
  const el = serialize.apply(this, arguments);

  if (this.Custom) {
    el.setAttribute('custom', this.Custom);
  }

  return el;
};

const deserialize = Annotations.Annotation.prototype.deserialize;

Annotations.Annotation.prototype.deserialize = function(el) {
  deserialize.apply(this, arguments);

  this.Custom = el.getAttribute('custom');
};

annot.Custom = {
  isChecked: false,
};

// Version 6.0 and after
annot.CustomData = {
  isChecked: false,
};

linkGetCustomData

Inside a config file, this function is moved to the readerControl object.

// Inside a config file

// Version 5.x and older
const customData = window.ControlUtils.getCustomData();

// Version 6.0 and after
const customData = window.readerControl.getCustomData();

linkDocument Viewer getCompleteRotation API requires a parameter

docViewer.getCompleteRotation now requires a page number as the first parameter.

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close