Save annotations to external storage

You can save annotation changes to external storage in two ways:

• Save only the annotation changes.
• Save the whole PDF.

Save only the annotation changes

Use Instant JSON to store annotation changes separately from the full PDF. This reduces bandwidth because you export only the annotation data.

Use Instance#exportInstantJSON to export annotation changes from the original PDF. Store the JSON separately, and apply it the next time you load the original PDF with Configuration#instantJSON. This option applies only without Document Engine.

With this approach, you can keep using the original PDF, so you don’t need to save the full PDF after each annotation change.

For examples, refer to the importing and exporting annotations with Instant JSON guide.

When you use Nutrient Web SDK with Document Engine, you can still use Instance#exportInstantJSON() to export annotation changes. For more information, refer to the Document Engine Instant JSON guide.

Save the whole PDF

Use Instance#exportPDF to export the modified PDF as an ArrayBuffer, and trigger a download. For more information, refer to the save a document to local storage guide.

If autosave is disabled, call Instance#save before exporting. Otherwise, the exported PDF doesn’t include unsaved annotations. In server-backed workflows, this save persists annotation changes to Document Engine before you export the PDF.

Confirm that annotations have been persisted

Use Instance.ensureChangesSaved to confirm that the backend has persisted an annotation. This method takes a single change, an array of changes, or a list of changes. It returns a promise that resolves to the saved changes after the server saves them.

If you update an annotation before the server saves it, Instance.ensureChangesSaved returns the updated annotation, even if you called it before the update.

The method takes the array returned by Instance#create, so you can chain the calls. Use the annotation ID with the backend API. This ID is unique within a document.

NutrientViewer.load(configuration).then(async (instance) => {
  const createdAnnotations = await instance.create(newAnnotation);
  const [savedAnnotation] = await instance.ensureChangesSaved(
    createdAnnotations
  );
  console.log(savedAnnotation.id); // => '01BS964AM5Z01J9MKBK64F22BQ'
});

NutrientViewer.load({
  ...configuration,
  autoSaveMode: NutrientViewer.AutoSaveMode.DISABLED
}).then(async (instance) => {
  const newAnnotation = new NutrientViewer.Annotations.TextAnnotation({
    pageIndex: 0,
    boundingBox: new NutrientViewer.Geometry.Rect({
      left: 100,
      top: 200,
      width: 150,
      height: 75
    }),
    text: {
      format: "plain",
      value: "foo"
    }
  });
  console.log(newAnnotation.text); // => 'foo'
  const createdAnnotations = await instance.create(newAnnotation);
  const savedAnnotationPromise = instance.ensureChangesSaved(
    createdAnnotations
  );
  const updatedAnnotations = await instance.update(
    createdAnnotations[0].set("text", "bar")
  );
  instance.save();
  const [savedAnnotation] = await savedAnnotationPromise;
  console.log(savedAnnotation.text); // => 'bar'
});