Add watermarks to PDFs using JavaScript

Nutrient Web SDK enables you to render a watermark on top of your PDF content when it’s displayed to a user. This is helpful when you want to prevent screenshots of your PDF document or personalize documents — for example, by including a username on each page.

To add a watermark:

1. Use the renderPageCallback option in the pspdfkit#load() method.

2. Inside the callback, use the Canvas API to draw custom content on top of each rendered page.

The callback receives the following parameters:

• ctx — The Canvas 2D rendering context.

• pageIndex — The index of the current page.

• pageSize — The dimensions of the page.

Now, using the Canvas API, you can draw your own watermark. The example below draws a watermark with the user’s name and current page number centered on each page:

PSPDFKit.load({
  document: document,
  renderPageCallback: function (ctx, pageIndex, pageSize) {
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(pageSize.width, pageSize.height);
    ctx.stroke();

    ctx.font = "30px Comic Sans MS";
    ctx.fillStyle = "red";
    ctx.textAlign = "center";

    ctx.fillText(
      `Generated for John Doe. Page ${pageIndex + 1}`,
      pageSize.width / 2,
      pageSize.height / 2
    );
  }
});

Alternative watermarking methods

There are alternative ways to create watermarks in Nutrient Web SDK. You can create watermarks using text annotations that can be saved separately, as demonstrated in the code snippet below:

// Create a free text annotation.
const textAnnotation = new PSPDFKit.Annotations.TextAnnotation({
  boundingBox: new PSPDFKit.Geometry.Rect({
    left: 228,
    top: 924,
    width: 600,
    height: 80
  }),
  fontSize: 40,
  text: {
    format: "plain",
    value: `Generated For ${username}`
  },
  pageIndex: 0
});

// Add the annotation to the document.
await instance.create(textAnnotation);

The advantage of using annotations for watermarking in comparison to watermarking using the renderPageCallback method is that they can be exported separately using Instant JSON and later applied to the original document when needed.

If you need to persist the watermarks in the actual PDF, you can create them as annotations and then flatten them into the document using instance.applyOperations(). This method requires the document editing component included in your license:

await instance.applyOperations([{ type: "flattenAnnotations" }]);

For creating a more comprehensive watermark pattern using text annotations across multiple pages, refer to this example in the Awesome Nutrient repository.

Exporting a watermark added to a PDF document

To export watermarks added to a PDF document, there are two main approaches:

1. Export only the changes (recommended) — You can use Instant JSON to export only the annotation changes, including watermarks, rather than the entire PDF. This significantly reduces bandwidth usage.

Use Instance#exportInstantJSON to export a JSON file containing all the changes made to the document, including the watermark, as demonstrated in the code snippet below:

await instance.save();
const instantJSON = await instance.exportInstantJSON();

This JSON can be stored separately and applied to the original PDF when needed using Configuration#instantJSON. For more information, refer to the save annotations to external storage guide.

Alternatively, the JSON file can be stored on your server, as demonstrated in the code snippet below:

await fetch("https://your-server.example.com/instant-json", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(instantJSON)
});

2. Export the entire PDF — Alternatively, you can export the modified PDF with the watermark as a complete file using Instance#exportPDF. For more information, refer to the save a document to local storage guide.