I have generated a screenshot of html document because I wanted to generate custom width pdfs. Now I am trying to convert screenshot to pdf. Though I found a library 'pdfkit' but is there any way we can do this using puppeteer itself.

I have generated a screenshot of html document because I wanted to generate custom width pdfs. Now I am trying to convert screenshot to pdf. Though I found a library 'pdfkit' but is there any way we can do this using puppeteer itself.

• javascript
• node.js
• puppeteer

3 Answers 3

The problem reduced to converting jpeg(or any image) to pdf.

• Read the base64Encode of the image file. Make sure to provide these flags to puppeter: --allow-file-access-from-files, --enable-local-file-accesses so that puppeter has access to the local screenshot image file in your server that you have generated by html->screenshot.

• Browse base64 data:image/png;base64,base64.... page

• convert to pdf.

  const puppeteer = require('puppeteer');
  const fs = require('fs');
  
  function base64Encode(file) {
      var bitmap = fs.readFileSync(file);
      return new Buffer(bitmap).toString('base64');
  }
  
  (async () => {
      const browser = await puppeteer.launch({args: ['--allow-file-access-from-files', '--enable-local-file-accesses']});
      const page = await browser.newPage();
      const image = 'data:image/png;base64,' + base64Encode('1.jpg');
      await page.goto(image, {waitUntil: 'networkidle2'});
      await page.pdf({path: 'output.pdf', format: 'A4'});
  
      await browser.close();
      console.log("done");
  })();
  

Try this solution, It will capture screenshot of a specific element that could be pass in a function as a paraeter, from URL and then add a screenshot to PDF

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

function base64Encode(file) {
    var bitmap = fs.readFileSync(file);
    return new Buffer(bitmap).toString('base64');
}

(async () => {

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    page.setViewport({width: 1000, height: 600, deviceScaleFactor: 1});

    await page.goto('https://www.chromestatus./samples', {waitUntil: 'networkidle0'});

    async function screenshotDOMElement(opts = {}) {
        const padding = 'padding' in opts ? opts.padding : 0;
        const path = 'path' in opts ? opts.path : null;
        const selector = opts.selector;

        if (!selector)
            throw Error('Please provide a selector.');

        const rect = await page.evaluate(selector => {
            const element = document.querySelector(selector);
            if (!element)
                return null;
            const {x, y, width, height} = element.getBoundingClientRect();
            return {left: x, top: y, width, height, id: element.id};
        }, selector);

        if (!rect)
            throw Error(`Could not find element that matches selector: ${selector}.`);

        return await page.screenshot({
            path,
            clip: {
                x: rect.left - padding,
                y: rect.top - padding,
                width: rect.width + padding * 2,
                height: rect.height + padding * 2
            }
        });
    }

    await screenshotDOMElement({
        path: 'element.png',
        selector: 'header aside',
        padding: 16
    });

    browser.close();
    captureDomTOoPDF();
})();


function captureDomTOoPDF(){
    

    
    (async () => {
        const browser = await puppeteer.launch({args: ['--allow-file-access-from-files', '--enable-local-file-accesses']});
        const page = await browser.newPage();
        const image = 'data:image/png;base64,' + base64Encode('element.png');
        await page.goto(image, {waitUntil: 'networkidle0'});
        await page.pdf({path: 'output.pdf', format: 'A4'});
    
        await browser.close();
        console.log("done");
    })();
    

}

Yes, check here: puppeteer pdf doc

also sample code from the office doc:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ybinator.', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});

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