PejmanNik/puppeteer-report

[Q]: How can I hide footer on first page?

JaLe29 opened this issue · 7 comments

JaLe29 commented

I would like to hide footer on first page.

In most cases is first page some title page and I would like to skip page number on my title page.

Is there any way how can I do it?

Thank you.

PejmanNik commented

There is no standard way to do this but I can add it to the lib if the issue got a few upvotes. also, I'm open to PR, It is not hard work to do.

but a workaround is to add on change event to footer (check the doc) and use this function:

        function onChange(element) {
            const pageNumberElement = element.getElementsByClassName('pageNumber')[0];
            if (pageNumberElement.textContent === '1') {
                 element.style.visibility = 'hidden'
            }
			
	    pageNumberElement.textContent = parseInt(pageNumberElement.textContent, 10) + 1
        }
  • 👎1
  • ❤️1
PejmanNik commented

I did some tests to see how can I handle it but because the space for header/footer is handled with page margin in puppeteer and there is no way to customize it per page. unfortunately, there is no way to handle this issue.

I'm working on a new React Lib (like React-pdf) but using puppeteer as the pdf generator in order to support HTML/CSS/JS. and that will resolve all these issues and we can customize the rendering algorithm in any way. It is a hubby/weekend project without any support so I can't estimate the release time for now.

jpike88 commented

Why not make the real margin always 0, and wrap the margin argument so only the content section gets a margin?

jpike88 commented

That would involve wrapping puppeteer itself, so you're calling launch on this wrapper class, and people don't have to import both libs explicitly anymore

PejmanNik commented

I don't understand you. but we need to reserve header/footer space on each page and there is no other way except use page margin

JaLe29 commented

@PejmanNik Thank you, it works fine also in react }https://github.com/PejmanNik/puppeteer-report/issues/32]

  • 👍1
ryanadhi commented

@PejmanNik do you have any suggestion your customizable using javascript doesn't work? all of page number won't changed into Red

js

const puppeteer = require('puppeteer');
const report = require('puppeteer-report');

const browser = await puppeteer.launch({
          args: ["--no-sandbox", "--disable-setuid-sandbox", "--disable-dev-shm-usage"],
        });
const page = await browser.newPage();
await page.setJavaScriptEnabled(true);
await page.setContent(result, {
     waitUntil: 'networkidle0',
     timeout: 0,
});

await page.pdf({
  format: 'A4',
  path: pdfPath,
  printBackground: true,
  displayHeaderFooter: true,
});
await report.pdfPage(page, {
  path: pdfPath,
  format: 'a4',
  preferCSSPageSize: false,
});

await browser.close();

html

<body>
  <div id="footer">
    Page: <span class="pageNumber"></span>
  </div>
  <script>
    function onChange(element) {
        const pageNumberElement = element.getElementsByClassName('pageNumber')[0];
        if (pageNumberElement.textContent === '2') {
            pageNumberElement.style.color = 'red'
        }
    }
</script>
  </body>