Pdf size issue in node js using puppeteer?

I am having a HTML Content with data and i am converting it to PDF using puppeteer npm package. I am able to generate PDF but the PDF is not full size. It's generating a small size pdf which is having lot of extra space around.

        res.render('invoice-pdf', { response: { data: invoiceInfo } }, async (error, resp) => {
            const getPDF = async (cData: any) => {
                return new Promise(async (resolve, reject) => {
                    const browser = await puppeteer.launch({ headless: 'new', args: ['--start-fullscreen']});
                    const page = await browser.newPage();
                    await page.setContent(cData);
                    
                    const height = await page.evaluate(() => document.documentElement.offsetHeight);
                    const width = await page.evaluate(() => document.documentElement.offsetWidth);

                    console.log('Height', height);
                    const pdf = await page.pdf({ scale: 1.0, height: height + 'px', width: width + 'px', printBackground: true, landscape: true });
                    await browser.close();
                    resolve(pdf);
                });
            };
            const details: any = await getPDF(resp);
            res.header('Content-type', 'application/pdf');
            res.header('Content-disposition', `attachment;filename=invoice-${req.params.invoiceId}.pdf`);
            res.send(details.toString('base64'));

As in screenshot there is lot of gap in left and top and pdf is not filled to page. I have tried pagesize a4,a6 but still same issue. Please suggest what to do ?

1. To debug, try capturing your page screen to make sure the margins were not generated before exporting to pdf:

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

2. I think you're trying to put a vertical invoice (letter format) into a horizontal landscape page which can cause unexpected margin issue, changing landscape mode may fix your problem (vertical = landscape: false)

...
const pdf = await page.pdf({ scale: 1.0, height: height + 'px', width: width + 'px', printBackground: true, landscape: false });
...

For debugging, maybe try to just connect to your node server that serves the invoice HTML directly with chrome and do a print to PDF manually to see what happens.

Puppeteer is going to be using CDP apis. Likely Page.printToPDF.

Note there are other parameters there, in particular format or preferCSSPageSize might be interesting for you to test. e.g. format: 'A4' or format: 'Letter' depending on whether your invoice recipient is in Europe or the US.

But ultimately the PDF you are getting is going to be based on the CSS for your html document. So you should set your html/body width to 100% and see if that makes a difference.

Manual testing makes the most sense here. You can (devtools > more tools > rendering) force the media type to be print rather than screen to also see how your print styles look as that is what will be used for the PDF rendering.

I'm not sure why you have fullscreen in your launch arguments. If you don't have a good reason, I would remove that.

If you are running headless, disable that and comment out the await browser.close(); so the browser window sticks around. You can then debug your styles directly in the window that remains.

I also see you are telling the pdf api to give you LANDSCAPE. Based on how your invoice looks I would guess that is wrong.

I would stay away from the screenshot API as there are a couple issues there:

• you lose the selectable/searchable text because the PDF is made from an image rather than html.
• the screenshot API defaults to taking screenshot of the entire viewport so you have to play games to get the viewport set right and you may have the same problem if your styles aren't based on scaling up to 100% width. The viewport setting also doesn't work consistently between headless and non-headless modes on some systems (you get different size screenshots in headless than non-headless mode for the same code).