Puppeteer JS generate PDF from selector

Question

I'm familiarizing myself with Puppeteer to use in a Vue.js app but I can't figure out how to generate a PDF based on specific element on the page. I can successfully create a PDF based on the full page, but that's not ideal. Is there a method or class I missed that can allow this? I couldn't find a chainable page function to filter by selector(s) like so:

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://what.a.fancy/website', {waitUntil: 'networkidle2'});
    await page.$('.just-this-html').pdf(options);

I did see there's a page.$(selector) function but I'm not sure how to chain that with a .then() call that could access the returned HTML to a PDF.

Thanks!

Gyration

Answer 1

Try code this. await page.setContent() page.setContent

Example

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.google.com/', {waitUntil: 'networkidle2'});
const dom = await page.$eval('div.jsb', (element) => {
     return element.innerHTML
}) // Get DOM HTML
await page.setContent(dom)   // HTML markup to assign to the page for generate pdf
await page.pdf(options)

Dawes

Thanks @aofdev! Is there a way to preserve the CSS that's been applied to the page? it seems like it's lost when the setContent call is made. – Gyration

I just discovered the page.addStyleTag function and that seems to work. Now I just need to figure out how to dynamically loop over the link[rel=stylesheet] tags on the page... – Gyration

Thanks @Dawes This really helps me, solution works. – Mullens

this works, but the only problem is that it wont save the css styling of the content in pdf.. – Exterior

Answer 2

Late to the puppeteer party. However, better late than never. Someone reaching here should test whether this snippet could be useful. Code derived from above answers:

const puppeteer = require('puppeteer');

(async () => {
   const browser = await puppeteer.launch() //defaults to true 
   const page = await browser.newPage()

 // Create PDF from your URL => replace my fictitious url with your own url for this to work! 
 await page.goto('https://932db2cf7b.ngrok.io/chapter/lesson.php', {waitUntil: 'networkidle2'})

const items = await page.$eval('#doto', (element) => {
return element.innerHTML 
}) // Get DOM HTML elements

  await page.setContent(items) 

 await page.pdf({ path: 'pdf/aip.pdf', format: 'A4' })

 await browser.close()
 })()

This is getting elements in a div to pdf => aip in a folder named pdf.

I hope the included comments will be helpful

Happy googling!

Ouch