CODEWITHSUNDEEP
javascriptnode.jspdfpdf-generationpuppeteer
Aaron Marsden
Aaron Marsden

Reputation: 375

Removing page breaks from puppeteer PDF?

I'm currently trying to see if there's a way I can remove page breaks in my puppeteer PDF, as some of the page breaks in my current PDF setup are cutting off text in a weird way. Screenshot of what I'm talking about:

Screenshot

My puppeteer code:

app.get("/:companyId/pdf", (req, res) => {
  (async () => {
    try {
      const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
      const page = await browser.newPage();
      const url =
        process.env.WEBSITE_URL + `/${req.params.companyId}/report-internal`;
      await page.goto(url, { waitUntil: "networkidle0" });
      const buffer = await page.pdf({ format: "A4", printBackground: true });
      res.type("application/pdf");
      res.send(buffer);
      browser.close();
    } catch (error) {
      console.error(error);
      res.status(500).send("PDF cannot be generated.");
    }
  })();
});

Is it possible to generate one long, continuous PDF with Puppeteer? That would be ideal. I've tried to set custom CSS print styles to prevent page breaks after certain elements, but so far, I haven't had any luck. Any help is much appreciated.

EDIT: I found a temporary fix that isn't the most beautiful, but works. I had to manually define the width and height of my document inside the page.pdf function as follows:

const buffer = await page.pdf({ printBackground: true, width: 800, height: 3800 });

If there's a better fix for this, that'd be awesome. But in case anyone stumbles across this, that's what worked for me.

Upvotes: 4

Views: 5789

Answers (1)

Edi Imanto
Edi Imanto

Reputation: 2499

I tried to make an alternative to detect the scrolled element, so that your page won't be cut off when printed to PDF, I hope this works as you wished:

const puppeteer = require('puppeteer')
const url = 'https://en.wikipedia.org/wiki/COVID-19_pandemic'

;(async () => {
    const browser = await puppeteer.launch({
        headless: true,
        defaultViewport: {
            width: 1280,
            height: 800
        },
        userDataDir: './temp'
    })
    const [page] = await browser.pages()
    const pageResponse = await page.goto(url)
    const scrollDimension = await page.evaluate( () => {
        return {
            width: document.scrollingElement.scrollWidth,
            height: document.scrollingElement.scrollHeight
        }
    })
//    const viewportSize = await page.evaluate( () => {
//        return {
//            width: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
//            height: Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
//        }
//    })
    await page.setViewport({
        width: scrollDimension.width,
        height: scrollDimension.height
    })
    const bufferPDF = await page.pdf({
        path: 'long.pdf',
        printBackground: true,
        width: scrollDimension.width,
        height: scrollDimension.height
    })
    const exit = await browser.close()
})()

Upvotes: 2

Related Questions