Add a watermark to a PDF on the web
Say you want to add a watermark to your PDF document, maybe before printing it out, and you don’t want to modify pages by hand.
Well, we’ve got you covered. In this blog post, you’ll learn how to add a watermark to every page of a PDF document (or a subset of it) automatically and directly from the browser with Nutrient Web SDK.
In our example, we’re adding text that reads Confidential on top of each page of the document. You can see the final result below.
This method allows you to display and print documents with watermarks. Please note, however, that watermarks are not persisted in the actual PDF file.
You can try the example with your own PDF document here.
Just follow the link, upload your document in the assets folder that you can find on the left, and then edit the filename variable and the addWatermark function in index.js.
How it works
To render and add a watermark to a document, we will use Nutrient Web SDK — a feature-rich PDF viewer and SDK for the web.
By leveraging the RenderPageCallback API, we are able to draw content on every page’s canvas:
function addWatermark(ctx, pageIndex, pageSize) { // Add a Confidential watermark on the page. ctx.translate(pageSize.width / 2 - 325, pageSize.height / 2 + 250); ctx.rotate(-0.25 * Math.PI); ctx.font = '90px Arial'; ctx.fillStyle = 'rgba(76, 130, 212,.2)'; ctx.fillText('CONFIDENTIAL', 100, 50); }
You can read more about this API in our guides.
ctx is the canvas 2D context, and it allows you to use any of the CanvasRenderingContext2D methods.
Although we are not using it in this example, we also get the current pageIndex, which we could use to, for example, skip a page.
Running the example on your computer
To run Nutrient Web SDK locally, you need an installation key and a license key.
If you don’t have these already, you can request them on our website. Make sure you tick the Web checkbox, and then open the confirmation email, which contains the link that will give you access to your trial license.
Simply follow the Nutrient Web SDK link and choose Standalone > Download Client to get your npm key (NPM_KEY), and then choose Standalone > Integrate Client to get your license key (LICENSE_KEY) for use with the SDK.
Now that you have an npm key, you can install PSPDFKit with npm:
npm i https://my.nutrient.io/npm/TRIAL-your-npm-key-goes-here/latest.tar.gz
Or, you can download it using the following URL:
https://my.nutrient.io/npm/TRIAL-your-npm-key-goes-here/latest.tar.gz
Once you’ve obtained the package, you can copy the source code of our example and the dist folder from the Nutrient package to a local folder on your computer.
Now change index.html to point to the local version of Nutrient:
<!-- index.html --> <body> <div id="app"></div> - <script src="https://de.web-examples.services.demo.pspdfkit.com/pspdfkit.js"></script> + <script src="./dist/pspdfkit.js"></script> <script src="./index.js"></script> </body>
Make sure you add your license key to index.js as well:
// index.js
PSPDFKit.load({
document: filename,
renderPageCallback: addWatermark,
printMode: PSPDFKit.PrintMode.DOM,
container: "#app",
+ licenseKey: "YOUR LICENSE GOES HERE"
});Now you’re all set! Just serve the project folder with a local webserver — for example, python -m SimpleHTTPServer 8080 — or use serve.
Conclusion
Adding a watermark to a PDF for the purpose of printing or displaying is very straightforward with Nutrient Web SDK.
The Standalone, WebAssembly-based version of Nutrient Web SDK includes this functionality and doesn’t require any complex backend infrastructure to operate.
With powerful and easy-to-use APIs like RenderPageCallback, Nutrient Web SDK can be the right solution if you need to integrate or work with PDFs in your applications.
For more examples, please visit our live Catalog application.
