Download with annotation.

[bhNibir]

❓ Question: How to include annotations in downloaded PDF using PDF.js?

Hi community! 👋

I'm working on a simple web app using PDF.js where I manually add an annotation via the annotationStorage.setValue() method. Everything seems to be working fine, and I can see the annotation object in the console before saving.

However, when I download the PDF using pdfDocument.saveDocument(), the annotation I added does not show up in the resulting file. I'm not sure if I'm missing a rendering step or if the annotation type I'm using isn't being embedded correctly.

🔧 My Setup

• I load and render a PDF onto a canvas.
• I manually add an annotation using annotationStorage.setValue() (see code below).
• I call pdfDocument.saveDocument() and create a blob to download the file.

🧪 Code Example

<script type="module">
  var url = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf";
  var { pdfjsLib } = globalThis;

  pdfjsLib.GlobalWorkerOptions.workerSrc =
    "https://mozilla.github.io/pdf.js/build/pdf.worker.mjs";

  var pdfDocument = null;

  var loadingTask = pdfjsLib.getDocument(url);
  loadingTask.promise.then(function (pdf) {
    pdfDocument = pdf;
    pdf.getPage(1).then(function (page) {
      var viewport = page.getViewport({ scale: 1 });
      var canvas = document.getElementById("the-canvas");
      var context = canvas.getContext("2d");
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      page.render({ canvasContext: context, viewport });
    });
  });

  document.getElementById("download-button").addEventListener("click", async () => {
    const annotationStorage = pdfDocument.annotationStorage;

    annotationStorage.setValue("id_111", {
      annotationType: 1,
      rect: [5, 10, 180, 100],
      fontSize: 1,
      color: [0, 0, 0],
      value: "this is a annotation",
    });

    const data = await pdfDocument.saveDocument();
    const blob = new Blob([data], { type: "application/pdf" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = "test.pdf";
    link.click();
  });
</script>

❌ Problem

The test.pdf file downloads successfully, but my custom annotation does not appear when I open it in a PDF viewer like Adobe Acrobat or browser PDF readers.

✅ What I’ve Tried

• Checked the console – the annotation object is set in annotationStorage.

🧐 Question

How can I embed custom annotations (like text or highlights) into the final PDF output so that they're visible after downloading?

---

Any help or guidance would be deeply appreciated. Thanks in advance! 🙏

---