Some test text!

Watermarks

Contents

Draw text as watermark
Draw custom content as watermark
Draw watermark without DocumentViewer

Adding text or an image as a watermark on top of a document requires only a few lines of code using the setWatermark method of DocumentViewer. This method allows you to pass an options object to draw text on top of the document or pass a custom function which will be executed with a reference to the page canvas.

linkDraw text as watermark

To draw a watermark, use docViewer.setWatermark and pass an options object as shown below.

const viewer = new PDFTron.WebViewer({
  initialDoc: 'https://url/to/my_file.docx',
  // ...
}, viewerElement);

viewerElement.addEventListener('ready', () => {
  const { docViewer } = viewer.getInstance();

  docViewer.setWatermark({
    // Draw diagonal watermark in middle of the document
    diagonal: {
      fontSize: 25, // or even smaller size
      fontFamily: 'sans-serif',
      color: 'red',
      opacity: 50, // from 0 to 100
      text: 'Watermark'
    },

    // Draw header watermark
    header: {
      fontSize: 10,
      fontFamily: 'sans-serif',
      color: 'red',
      opacity: 70,
      left: 'left watermark',
      center: 'center watermark',
      right: ''
    }
  });
})

linkDraw custom content as watermark

The setWatermark method also allows you to draw custom content on the page. To do this, pass a custom function to the API as a part of the options object.

For the following sample, we will use a Promise which will resolve with the watermark options object. If the document hasn't been loaded yet then DocumentViewer will wait to finish loading it until the watermark options are ready.

const viewer = new PDFTron.WebViewer({
  initialDoc: 'https://url/to/my_file.docx',
  // ...
}, viewerElement);

viewerElement.addEventListener('ready', () => {
  const { docViewer } = viewer.getInstance();

  const path = '/samples/full-apis/TestFiles/butterfly.png'

  // Promise resolves with options object
  const promise = new Promise(resolve => {
      const img = new Image();
      const options = {
        footer: {
          fontSize: 15,
          fontFamily: 'sans-serif',
          color: 'red',
          opacity: 70,
          left: 'left watermark',
          center: 'center watermark'
        },
        custom: (ctx, pageIndex, pageWidth, pageHeight) => {
          // the pageIndex is also passed in so you could have
          // a different watermark for each page
          ctx.drawImage(
            img,
            pageWidth / 2 - img.width / 2,
            pageHeight / 2 - img.height / 2
          );
        }
      }
      img.onload = () => resolve(options);
      img.src = path;
  });

  docViewer.setWatermark(promise)
});

linkDraw watermark without DocumentViewer

If you're constructing your own Document instance then it also provides a setWatermark method.

const filePath = 'http://url/to/test_doc_1.pdf';
const watermarkOptions = {
 header: {
   fontSize: 15,
   color: 'blue',
   center: 'center watermark',
 },
 diagonal: {
   fontSize: 30,
   fontFamily: 'sans-serif',
   color: 'red',
   opacity: 100,
   text: 'Watermark'
 }
}

CoreControls.getDefaultBackendType().then(backendType => {
 const partRetriever =
   new CoreControls.PartRetrievers.ExternalPdfPartRetriever(filePath);
 const doc = new CoreControls.Document(filePath, 'pdf');

 const callback = () => {
   // Set watermark options object
   doc.setWatermark(watermarkOptions);

   // Draw canvas
   doc.loadCanvasAsync({
     pageIndex: 0,
     getZoom: () => 0.8,  // 80% zoom
     drawComplete: (pageCanvas) =>  {
       // Append canvas to dom to see the result
       document.body.appendChild(pageCanvas);
     },
   });
 }

 const options = {
   workerTransportPromise:
     CoreControls.initPDFWorkerTransports(backendType, {}, 'LICENSE_KEY_HERE')
 };

 doc.loadAsync(partRetriever, callback, options);
});

Get the answers you need: Support

Contents

Draw text as watermark
Draw custom content as watermark
Draw watermark without DocumentViewer