Adding a watermark to PDF on BigCommerce using JS
Watermarks offer a step toward safeguarding intellectual property. Not only can you can set PDF security settings to limit activities like printing and making changes, watermarking also prevents recipients from misusing your documents.
Watermarking your PDF document can signify whether the PDF document is a copy or an original, who the company that authorizes a form is, even the kind of PDF document, such as an estimate, invoice, and so on.
Perhaps most important of all, a watermark on your PDF document is hard to miss once you’ve stamped it onto your pages. Whether recipients print the document or simply view it onscreen, a watermark shows the classification of your entire file at a glance, making it an ideal PDF security feature.
BigCommerce’s Stencil theme engine allows its users to edit theme files and add customization to the users store frontend. They also incorporated the Stencil CLI to allow developers the ease of working locally, edit and preview themes with no real impact on the live storefront. Stencil CLI also uses BrowserSync, which allows the developer to test across devices with ease.
Note: To test this locally, you’ll have to add script directly to the download-item.html file
Creating the PDF script
Storefront > Script Manager > Create Script
Let’s fill out the Create Script form:
Name Of Script: Watermark PDF
Description: Place watermark and timestamp on pdf
Location on page: Footer
Select pages where script will be added: All Pages
Script Category: Functional (Enables enhanced functionality, such as videos and live chat. If you do not allow these, then some or all of these functions may not work properly.)
Script type: Script
Writing The Script
We will be using the pdf-lib library to create a new pdf to merge into a digital product. We will modify the digital download with the watermark, timestamp, site that it was downloaded from and user that downloaded.
First we will import the CDNs
The download() function is used to trigger our pdf download. The function takes three parameters, data, strFileName, strMimeType.
download(pdfFile, "downloadName", "application/pdf");PDFLib is the package we will use to manipulate the pdfs
Let’s start by creating an async function and calling some classes:
We’ll use the PDFDocument class to call the load() method. We’ll load the PDF document and use the await operation. Let’s create a variable with the name pdfDoc.
Next lets fetch the URL of the PDF we want to modify and use arrayBuffer() response when fetch is successful to read the ArrayBuffer. Let’s add the new variable, existingPdfBytes, to the load() method as a parameter and console.log a statement that lets us know it’s been fetched successfully.
After reading the document, we will create a variable, pages and use the getPages() method calculate how many pages are in the PDF. We’ll want to loop over the PDF to add the watermark to every page and for that we will use a for loop. We’ll use the Object.entries() method to return the PDF pages in the correct order.
We want to get the page height and width to be able to place our watermark on the top left corner and we’ll select a font and font family for the watermark. We will create firstPage and store height and width using the getSize() method.
We’ll need to find the Theme Objects for the customer name and the site url to be placed in the watermark. We also want to add the date of the PDF download, for that we will use the Date() method. For our handlers, we will use: {{settings.base_url}} and {{customer.name}}. We will create two variables, dateDownload and textWatermark.
After creating the watermark we will translate it to modify the current pdf and add our watermark. To do this we will need to serialize it into Uint8Array. After serializing we can use the download() method and trigger the browser to download the new modified PDF. We’ll use the product name as the downloaded file name using the handler {{downloads.product_name}}.
Last we will add url as a parameter to our function and add it to the onclick attribute we will place on our button. Let’s add our code to our script and place our attribute into the download-item.html file.
Well go over to our theme, edit theme files and navigate to our download-file.
templates > pages > accounts > download-file.html
We’ll add the onclick attribute to call our watermarkPdf() function and use this.href to get the url of the file on the current page.
onclick="watermarkPdf(this.href); return false;"
And we’re done!
