Creating PDF files from elements using Puppeteer JS

Question

Creating PDF files from elements using Puppeteer JS

In my quest to master the usage of Puppeteer within a Vue.js application, I am facing a challenge. I am able to create a PDF based on the entire page successfully, but I am struggling to generate a PDF for a specific element on the page. Is there a method or class that I overlooked which can help with this task? I have searched for a chainable function within the 'page' object 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 came across the page.$(selector) function, but I am unsure of how to properly chain it with a .then() call to convert the returned HTML into a PDF.

Your insights and guidance on this matter would be greatly appreciated!

javascript vue.js pdf-generation puppeteer html2pdf

Answer 1

Answer №1

Give this code a try: await page.setContent() page.setContent

Here's an 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
}) // Retrieve DOM HTML content
await page.setContent(dom)   // Set the HTML markup to generate PDF
await page.pdf(options)

Answer 2

Give this code a try: await page.setContent() page.setContent

Here's an 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
}) // Retrieve DOM HTML content
await page.setContent(dom)   // Set the HTML markup to generate PDF
await page.pdf(options)

Answer 3

Answer №2

Just arrived at the puppeteer gathering fashionably late. But as they say, better late than never. Anyone stumbling upon this should definitely give this snippet a try to see if it serves any purpose. Here's the code adapted from previous responses:

const puppeteer = require('puppeteer');

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

 // Generate a PDF from your URL => make sure to replace the placeholder url with your own for it to work! 
 await page.goto('https://932db2cf7b.ngrok.io/chapter/lesson.php', {waitUntil: 'networkidle2'})

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

  await page.setContent(items) 

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

 await browser.close()
 })()

This script converts elements within a div into a PDF file named aip stored in a folder called pdf.

I hope the comments provided prove to be useful

Happy coding!

Answer 4

Just arrived at the puppeteer gathering fashionably late. But as they say, better late than never. Anyone stumbling upon this should definitely give this snippet a try to see if it serves any purpose. Here's the code adapted from previous responses:

const puppeteer = require('puppeteer');

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

 // Generate a PDF from your URL => make sure to replace the placeholder url with your own for it to work! 
 await page.goto('https://932db2cf7b.ngrok.io/chapter/lesson.php', {waitUntil: 'networkidle2'})

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

  await page.setContent(items) 

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

 await browser.close()
 })()

This script converts elements within a div into a PDF file named aip stored in a folder called pdf.

I hope the comments provided prove to be useful

Happy coding!

Creating PDF files from elements using Puppeteer JS

Answer №1

Answer №2

Similar questions

use ajax to dynamically append a dropdown menu

javascript - The window.onload event is not firing

Enhancing Chart Accessibility with Highcharts in VUE.js

Want to learn how to display a description below a photo when you hover over it in a photo gallery?

Jest is throwing an error: Unable to access property from undefined while trying to import from a custom

The request's body in the PUT method is void

Having trouble getting images to display in Vue markdown?

The player clicks once and the game is played two times

Load Vue 3 components dynamically using a string-based approach

What is the method for arranging objects in AngularJS using a custom sorting sequence?

When the search button is clicked to find a specific address, the React Google Maps API fails to zoom in on

Ways to avoid scrolling on a fixed element

Removing leading zeros from numeric strings in JSON data

Tips for efficiently saving and updating data simultaneously using Laravel and Vue

AngularJS is throwing an error because it is unable to access the property `$valid` on an undefined object

Executing functions in beforeRouteEnter NProgress

Discover potential routes to nodes using JavaScript

What is the best way to include additional text in a dropdown menu?

Tips for passing a timestamp to a Postgresql DB using a Button in a Form instead of a traditional rails time_select box

When a user clicks on an element, use jQuery to show a specific