CODEWITHSUNDEEP
google-chromepuppeteer
user3824671
user3824671

Reputation: 1

puppeteer generated pdf How to display content at the bottom of the last page

puppeteer pdf generation

I wanted to implement the end of the page function, but there was no good solution, We hope to get help from the community.

code：

<html>
  <head>
    <style>
      .content {
        background-color: #999;
      }
      .footer {
        background-color: #e9a530;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <table>
        <thead>
          <tr>
            <td>tabe header 1</td>
            <td>tabe header 2</td>
            <td>tabe header 3</td>
            <td>tabe header 4</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colspan="4">tabe content 1</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 2</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 3</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 4</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 5</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 1</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 2</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 3</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 4</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 5</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 1</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 2</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 3</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 4</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 5</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 1</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 2</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 3</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 4</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 5</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 1</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 2</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 3</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 4</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 5</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 1</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 2</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 3</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 4</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 5</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 1</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 2</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 3</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 4</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 5</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 1</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 2</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 3</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 4</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 5</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 1</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 2</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 3</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 4</td>
          </tr>
          <tr>
            <td colspan="4">tabe content 5</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4">table footer</td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="footer">
      I want the footer at the bottom of the print page
    </div>
  </body>
</html>

When I print a page using chrome, I want the footer to be at the bottom of the current page, the data to be dynamic, and the pagination to be potentially multiple pages

chrome print page

I tried to

'css position fixed' and 'Calculate content height based on DOM's scrollHeight and offsetTop', However, the content contains 'table thead tfoot' and 'page-break-inside', and the positioning is inaccurate.

Upvotes: 0

Views: 48

Answers (1)

Gopinath Natarajan
Gopinath Natarajan

Reputation: 1

const puppeteer = require("puppeteer");

const browser = await puppeteer.launch();
const page = await browser.newPage();



await page.pdf({
    path: pdfPath,
    format: "A4",
    margin: { top: "100px", bottom: "150px", left: "50px", right: "50px" }, // Adjust margins for header/footer
    displayHeaderFooter: true,
    headerTemplate: headerTemplate,
    footerTemplate: footerTemplate,
    printBackground: true,
  });

Add your content in footerTemplate , it will work

Upvotes: 0

Related Questions