Troubleshooting puppeteer PDF: Unable to set table height using CSS for tr:last-child { height: 100%; }

Question

Troubleshooting puppeteer PDF: Unable to set table height using CSS for tr:last-child { height: 100%; }

My Node.js code snippet is as follows:

await page.setContent(html, {waitUntil: 'networkidle2'});

const pdf = await page.pdf({
  format: 'A4',
  printBackground: true,
  margin: {
    top: '14mm', // default is 0, units: mm, cm, in, px
    right: '10mm',
    bottom: '35mm',
    left: '12mm'
  },
  displayHeaderFooter: true,
  headerTemplate: header,
  footerTemplate: footer
});

I have managed to create an HTML that displays the height correctly in Chrome: https://i.sstatic.net/g8buZ.png

However, when converting this into a pdf, the TR height is not taken into account (as shown by the red line): https://i.sstatic.net/WePvF.png

I have tried various methods to adjust the table height and the TR elements to fill the entire page for the PDF output without success...

Update 1:

To visualize how the page appears, I included a screenshot capture with

await page.screenshot({path: '/tmp/full_img.png', fullPage: true});

The resulting image shows this view: https://i.sstatic.net/bbgpp.png

From this, it is evident that the page renders correctly in the "browser" but the "printed" PDF does not.

Update 2:

I also added borders to the page objects, revealing that the body (yellow) and the main container (green), which holds the tables, are displaying correctly while only the table (cyan) is deviating from the design:

https://i.sstatic.net/sa7KX.png

Update 3:

Comparing the "Print" option in Chrome on my local browser to Puppeteer's output, they now align consistently:

https://i.sstatic.net/rkRNB.png

Easier to test of course... Below is the updated HTML link as well: https://github.com/puppeteer/puppeteer/files/5747755/ut.html.txt

html css node.js puppeteer

Answer 1

Answer №1

We recommend incorporating the following into your stylesheet

@media screen {
    section, article {
        width: 100%;
    }
}

Answer 2

We recommend incorporating the following into your stylesheet

@media screen {
    section, article {
        width: 100%;
    }
}

Answer 3

Answer №2

After extensive hours of investigation, I have uncovered two critical issues!

First and foremost, it appears that both the code and the table require specific CSS attributes:

//node.js
await page.emulateMediaType('screen'); //<-- crucial

//css
.itemstable {
        border-collapse: collapse;
        border-spacing: 0 0;
        -webkit-border-vertical-spacing: 0;
        width: 100%;
        height: 100%;
        min-height: 198mm !important;
        position: relative;
        table-layout: fixed;
    }

Although I cannot confirm if all of these attributes are absolutely necessary, I will refrain from making any further changes! :)

The second issue seems to be related to a potential bug on Windows!

Upon testing this HTML code on Edge, Chrome, and Vivaldi browsers on Windows, I encountered the same error across all three platforms, as well as when running Puppeteer with Node.js on Windows!

I enlisted the help of a colleague who tested the code on his Mac, and the PDF displayed the correct table/tr height. Subsequently, I conducted tests using WSL (Windows Subsystem for Linux) and AWS Lambda (Node.js), where the code worked flawlessly after implementing the aforementioned CSS modifications!

Answer 4

After extensive hours of investigation, I have uncovered two critical issues!

First and foremost, it appears that both the code and the table require specific CSS attributes:

//node.js
await page.emulateMediaType('screen'); //<-- crucial

//css
.itemstable {
        border-collapse: collapse;
        border-spacing: 0 0;
        -webkit-border-vertical-spacing: 0;
        width: 100%;
        height: 100%;
        min-height: 198mm !important;
        position: relative;
        table-layout: fixed;
    }

Although I cannot confirm if all of these attributes are absolutely necessary, I will refrain from making any further changes! :)

The second issue seems to be related to a potential bug on Windows!

Upon testing this HTML code on Edge, Chrome, and Vivaldi browsers on Windows, I encountered the same error across all three platforms, as well as when running Puppeteer with Node.js on Windows!

I enlisted the help of a colleague who tested the code on his Mac, and the PDF displayed the correct table/tr height. Subsequently, I conducted tests using WSL (Windows Subsystem for Linux) and AWS Lambda (Node.js), where the code worked flawlessly after implementing the aforementioned CSS modifications!

Answer 5

Answer №3

I encountered a similar issue while using puppeteer to generate a PDF invoice. I was able to resolve it by setting the height: 50vh for the <table> tag (or through CSS). Additionally, I included a

<tr style="height:100%"><td></td></tr>

at the end with the same structure.

<table style="height: 50vh">
      <thead>
        <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
          <td>Content 4</td>
          <td>Content 5</td>
        </tr>
        <tr style="height: 100%">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
</table>

Answer 6

I encountered a similar issue while using puppeteer to generate a PDF invoice. I was able to resolve it by setting the height: 50vh for the <table> tag (or through CSS). Additionally, I included a

<tr style="height:100%"><td></td></tr>

at the end with the same structure.

<table style="height: 50vh">
      <thead>
        <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
          <td>Content 4</td>
          <td>Content 5</td>
        </tr>
        <tr style="height: 100%">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
</table>

Troubleshooting puppeteer PDF: Unable to set table height using CSS for tr:last-child { height: 100%; }

Answer №1

Answer №2

Answer №3

Similar questions

Using Node.js server along with MySQL database and socket.io technology for real-time

Could somebody clarify the situation with the `push` function?

Concerns with the dimensions of HTML thumbnails

Could you show me how the easyrtcid is generated in the demonstration of audio-only chat? I would appreciate a step-by

Sending arguments to a bash script using npm

The drag and drop feature seems to be malfunctioning in the Selenium Webdriver when using the Node.js (JavaScript) test automation framework

Something seems to be preventing Div from appearing and there are no error messages appearing

I am interested in extracting information from a website by utilizing PHP

Extract content from an HTML form within a specific cell using Cheerio

Extending an element beyond the boundaries of its container

What is the reason behind Svelte not scoping the tag under a class, but instead using individual tag.class to style a component?

Is there a way to prevent this picture from shifting?

Reveal and Conceal, the ever-changing show

How come my npm is stuck at version 2.14.12 and not updating to 3.7.2?

IE has trouble with CSS inline-block and width-auto styling, leading to incorrect rendering

Exploring the power of internal linking with GatsbyJS

Transfer data dynamically between JSP pages using parameters

Element receives scrollbar upon reaching 100% width

Adding a custom validation function to the joi.any() method - the easy way!

Generate visual representations of data sorted by category using AngularJS components