Avoiding page breaks in Puppeteer PDFs

I'm facing an issue with my HTML code where my tabular data is splitting across two pages when converting to PDF using puppeteer. I want to prevent the table from splitting across pages.

<table>
<tbody></tbody>
</table>

Despite trying various solutions found on Stack Overflow for this problem (https://github.com/puppeteer/puppeteer/issues/6366), I haven't been able to find a working solution. I attempted using page-break-inside: avoid in tbody/tr, but it didn't work. I am aware that this CSS property works on block-level elements, so I also tried wrapping the table in a div and applying the CSS to the div, but the table still breaks across pages. If anyone has a solution, please help. Thank you.

htmlcssnode.jspuppeteerpage-break-inside

Answer №1

Before anything else, make sure to create your PDF file optimized for printing. Use the following method:

await page.optimizeForPrinting();

This will give you control over how the content is displayed when printed using CSS properties like break-before. For more information, refer to this link: https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media

Solution

There are several ways to address this:

  • If your table is small enough, you can ensure it appears on a single page by using a CSS rule like 
    style="page-break-before: always"
    .
  • For longer tables (common with dynamic data), creating a PDF optimized for printing will automatically repeat the table header on each page, ensuring readability. To keep certain element groups together, apply similar CSS rules as mentioned earlier.

Obtaining a precise rendering with Puppeteer may require some effort, but Puppeteer is currently one of the best tools for this task. Stay determined.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The request.body function is successfully processing the POST request, however it is encountering difficulties when handling

Recently, I encountered an issue while updating an array in my API. After updating the array, I noticed that only the default MongoDB ID was being returned. It appears that req.body.something is undefined even though req.body is defined. I have ensured tha ...

node.jsmongodbexpresspostman

Transferring information from a Form to various web pages using a single JavaScript source file

After successfully creating a basic login page with hardcoded credentials, I faced a challenge. While I could transition to the next page once the user logs in, I struggled to display the username entered on the first page onto the second page. I attempte ...

javascripthtml

jQuery UI Datepicker extending beyond its bounds

My Datepicker is expanding and filling the entire screen. What could be causing this issue? Here is my code: Additionally, how can I change the date format in jQuery to appear as dd-mm-yyyy? https://i.stack.imgur.com/IQzVV.png HTML: <!DOCTYPE html&g ...

jqueryhtmlcss

What is the best way to add a right-hand side navigation bar without blocking the scrollbar from view?

Take a look at this webpage: I am designing a website that includes a header, a footer, and a central container with left and right navigation bars surrounding a content area. However, I want the scrollbar for the content to appear on the right side of th ...

css

Is there a way to include a minimize button on a MaterialUi Table enclosed in a Paper component for easy table reduction?

I am trying to add a minimize button to either minimize my MaterialUi Table or the Paper component that wraps it. Here is the code I have so far: <TableContainer component={Paper} style={{maxHeight:'inherit', maxWidth:'inherit', boxS ...

htmlcssreactjsmaterial-uicss-tables

The binary file appears enlarged or damaged after being downloaded through Node/Express

I am faced with the challenge of offering a binary file for download through Node and Express. The file in question is a Windows binary (.msi) with a size of approximately 26MB when saved on disk. By utilizing Express, I have been able to successfully in ...

node.jsexpressbinarydownload

The comparison between createElement() and AJAX response

Currently, my website has a login form that updates the page with user data through AJAX after successful login. To maintain semantic integrity, I use JavaScript to remove the login form from the page once the user is logged in. However, when the user lo ...

javascriptjqueryhtmlajax

Exploring Laravel 4: Navigating Tables with Relational Models

Edit: error fixed I am managing two interconnected Models: Project and Task. Their relationship is defined as follows: Project.php class Project extends Eloquent { public function tasks() { return $this->hasMany('Task'); ...

phphtmllaravellaravel-4

Learn the process of showcasing database content on a webpage with an interactive feature that enables users to choose and access additional details

Apologies if this question has been asked before, I have searched for a solution but my web development knowledge is limited. To better understand my issue, you can visit the site at 000freewebhost by following this link: In summary, I am trying to select ...

javascriptphphtmlmysqlarrays

How do I apply a xPage page style using the styleClass attribute instead of directly using the style attribute

Would like to know how to change the background color of an entire page using styleClass instead of directly in the xp:view tag? Here's an example that works: <xp:view xmlns:xp="http://www.ibm.com/xsp/core" style="background-color:#f1f1f1;"> ...

cssxpageslotus-notes

Having Trouble with JQuery Triggering Tabs inside an iFrame

I am curious why this code functions properly on my parent's HTML page: $("#assessmentsTab").trigger("click"); but fails to work within my iFrame: $("#assessmentsTab", window.parent.document).trigger("click"); Does anyone have any suggestions? I ...

jqueryhtmltabs

Avoid inserting line breaks when utilizing ngFor

I am using ngFor to iterate through a list of images like this: <div class="image-holder" *ngFor="let image of datasource"> <img src="{{image.url}}" height="150" /> </div> Below is the corresponding CSS code: .image-holder { di ...

cssangular

What is the best way to sort out the <li> elements within a <ul> that has a specific id

<ul class="apple" id="A"> <li> <li> ..... ...... ...... </ul> <ul class="apple" id="C"> <li> <li> ...

javascriptjquerycssfreemarker

The deployment of Node.js on Heroku encounters issues when attempting to serve static files from subdirectories

Currently, I am in the process of deploying a NodeJs application on Heroku. While most things are functioning properly, I have encountered a slight issue when it comes to serving static files. In order to serve my static files, I have configured the follo ...

node.jsherokuexpressstatic-files

Is Node.js + Express capable of managing multiple requests simultaneously using just one CPU core?

In the midst of developing an API using nodejs, express, and mongodb within a Docker container. Currently, the Docker setup is operational on a DigitalOcean droplet featuring 512MB of RAM and 1 cpu core. From my research, I've learned that nodejs op ...

javascriptnode.jsexpress

When a div is clicked, the text inside the button changes. If another div is clicked, the previous text is reset

I am seeking a solution for changing the text of a button within three columns when a specific 'advice-card' div is clicked on. The text should change to 'Hide' for the clicked div, and the other buttons should switch back to 'Show ...

javascripthtmljquerycss

Designing an HTML banner with 100% width and 660 pixels in height for optimal responsiveness

I am in need of a responsive banner that will be displayed at 100% width and 600px height on fullscreen. Below is the code I have: <style> /* default height */ #ad { height: 660px; width: 100%; } @media o ...

jqueryhtmlcss

jQuery tooltip box not functioning correctly

When the mouse enters on li a, the tooltip box (class .show_tooltip) is appearing on the left. I want each tooltip box to display just above or to the left of the link that the mouse is on. The links need to stay on the right as they are now, so please do ...

javascriptjquerycss

Express does not provide a 304 response code for static json files

I have a situation where I am utilizing express.static to serve a large static json file. It seems that express.static is always returning a 200 status code for the static json file, even when it remains unchanged. Given the file's size and the speci ...

javascriptjsonnode.jsexpress

How can I improve the organization of my NPM scripts for better readability?

My primary testing process tool has become NPM scripts. However, as I continue to create more NPM scripts, the order and structure are becoming increasingly difficult to quickly interpret. Below is a snapshot of my current scripts: { "scripts": { ...

javascriptnode.jsnpm