#Page query - hiding header in #page:first seems to misplace all trailing footers (using Puppeteer) [duplicate] - css

Question

Im new using nodejs functions and also puppeteer. Previously I was using wkhtmltopdf but currently its options are very poor.
So, my idea was generating a pdf from a html with a first cover page (an image with full A4 width/height ), since the footer is generated from the index.js, theres no way to hide it on the FIRST page of the PDF.
//Imports
const puppeteer = require('puppeteer');
//Open browser
async function startBrowser() {
const browser = await puppeteer.launch({headless: true, args:['--no-sandbox']});
const page = await browser.newPage();
return {browser, page};
}
//Close browser
async function closeBrowser(browser) {
return browser.close();
}
//Html to pdf
async function html2pdf(url) {
const {browser, page} = await startBrowser();
await page.goto(url, {waitUntil: 'networkidle2'});
await page.emulateMedia('screen');
//Options
await page.pdf({
printBackground: true,
path: 'result.pdf',
displayHeaderFooter: true,
footerTemplate: '<div style="width:100%;text-align:right;position:relative;top:10px;right:10px;"><img width="60px" src="data:data:image/..."'
margin : {top: '0px',right: '0px',bottom: '40px',left: '0px' },
scale: 1,
landscape: false,
format: 'A4',
pageRanges: ""
});
}
//Exec
(async () => {
await html2pdf('file:///loc/node_pdfs/givenhtml.html');
process.exit(1);
})();
My question is, is there any way to locate the first footer and hide it from the index fuction?
Thanks!

Answer 1

There are currently multiple bugs (see this question/answer or this one) that make it impossible to get this working.
This is currently only possible for headers using this trick (taken from this github comment):
await page.addStyleTag({
content: `
body { margin-top: 1cm; }
#page:first { margin-top: 0; }
`,
});
This will basically hide the margin on the first page, but will not work when using a bottom margin (as also noted here).
Possible Solution
The solution I recommend is to create two PDFs, one with only the first page and no margins, and another one with the remaining pages and a margin:
await page.pdf({
displayHeaderFooter: false,
pageRanges: '1',
path: 'page1.pdf',
});
await page.pdf({
displayHeaderFooter: true,
footerTemplate: '<div style="font-size:5mm;">Your footer text</div>',
margin: {
bottom: '10mm'
},
pageRanges: '2-', // start this PDF at page 2
path: 'remaining-pages.pdf',
});
Depending on how often you need to perform the task you could either manually merge the PDFs or automate it using a tool like easy-pdf-merge (I have not used this one myself).

Answer 2

small hint: easy-pdf-merge an pdf-merge have some "system-tools-dependencies"
I prefer pdf-lib, a plain js tool where you can use Buffers and Typescript support
My Typescript:
import {PDFDocument} from 'pdf-lib'
...
const options: PDFOptions = {
format: 'A4',
displayHeaderFooter: true,
footerTemplate: footerTemplate,
margin: {
top: '20mm',
bottom: '20mm',
},
}
const page1: Buffer = await page.pdf({
...options,
headerTemplate: '<div><!-- no header hack --></div>',
pageRanges: '1',
})
const page2: Buffer = await page.pdf({
...options,
headerTemplate: headerTemplate,
pageRanges: '2-',
})
const pdfDoc = await PDFDocument.create()
const coverDoc = await PDFDocument.load(page1)
const [coverPage] = await pdfDoc.copyPages(coverDoc, [0])
pdfDoc.addPage(coverPage)
const mainDoc = await PDFDocument.load(page2)
for (let i = 0; i < mainDoc.getPageCount(); i++) {
const [aMainPage] = await pdfDoc.copyPages(mainDoc, [i])
pdfDoc.addPage(aMainPage)
}
const pdfBytes = await pdfDoc.save()
// Buffer for https response in my case
return Buffer.from(pdfBytes)
...