Skip to content

PDF Puppeteer Cave


How to run these scripts

Install Puppeteer then save the scripts in .js files

Use the command: node script.js to run a script


Sample RPA Test Page

The scripts reference a custom RPA Test Page


Video: Running Puppeteer PDF Code Samples

The video shows the code samples running as .JS files and the PDF output produced.


Script 1: Create a PDF from a Web Page

Script 01
// Script 1: Create a PDF of a Web Page

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://verdapress.uk/services/test-bed/', {
    waitUntil: 'networkidle2',
  });
  await page.pdf({ path: 'vpWebPage.pdf', format: 'a4' });

  await browser.close();
})();

Script 2: Populate an HTML Form

Script 02
// Script 2: Fill in a Form on a Web Page & PDF

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://verdapress.uk/services/test-bed/', {
    waitUntil: 'networkidle2',
  });
  await page.type('#exhibition', 'MPP Camera History 1961-2022');
  await page.type('#description', 'All about your special 5x4 adventures');
  await page.type('#manager', 'Roger Smith');
  await page.click('#donation')
  await page.type('#openingdate', '01/08/2022');
  await page.type('#closingdate', '21/09/2022');
  await page.type('#website', 'https://verdapress.uk');
  await page.type('#email', 'd503@verdapress.uk');

  await page.pdf({ path: 'vpWebForm.pdf', format: 'a4' });

  await browser.close();
})();

Script 03
// Script 3: Create a PDF of a Web Page add Header/Footer

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  const templateHeader = fs.readFileSync('template-header.html', 'utf-8')
  const templateFooter = fs.readFileSync('template-footer.html', 'utf-8')

  await page.goto('https://verdapress.uk/services/test-bed')

  await page.pdf({
    path: 'vpHeaderFooter.pdf',
    displayHeaderFooter: true,
    headerTemplate: templateHeader,
    footerTemplate: templateFooter,
    margin: {
      top: '100px',
      bottom: '40px'
    },
    printBackground: true
  })

  await browser.close()
})()

Script 4: Use the File System to Generate a PDF

Script 04
// Script 4: Use the File system & convert file to PDF

const puppeteer = require('puppeteer');
// Node.js file system module fs
// fs allows you to work with the file system on your computer.
// To include the File System module, use the require() method:
const fs = require('fs');
// https://www.w3schools.com/nodejs/nodejs_filesystem.asp


(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
   // set your html as the pages content from file system
  const html = fs.readFileSync(`${__dirname}/invoice_raw.html`, 'utf8')
  await page.setContent(html, {
    waitUntil: 'domcontentloaded'
  })
  await page.pdf({ path: 'vpFSInvoice.pdf', format: 'a4' });

  await browser.close();
})();

Script 5: Add a Watermark via CSS

Script 05
// Script 5: Add a Watermark to a PDF

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://verdapress.uk/services/test-bed/', {
    waitUntil: 'networkidle2',
  });
    // add CSS File
  await page.addStyleTag({path: 'watermark.css'});
  await page.pdf({ path: 'vpCSSWatermark.pdf', format: 'a4' });

  await browser.close();
})();

Watermark.css

watermark.css
body {

    color: green
}

body:before{
    content: 'CONFIDENTIAL';
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;

    color: red;
    font-size: 100px;
    font-weight: 500px;
    display: grid;
    justify-content: center;
    align-content: center;
    opacity: 0.2;
    transform: rotate(-45deg);
  }

Hint

Download project scripts