如何从 Puppeteer 生成的 PDF 中删除页面分割线？

Question

我目前正在尝试查看是否有一种方法可以在我的puppeteer PDF中删除分页符，因为我的当前PDF设置中的某些分页符以奇怪的方式截断了文本。下面是我所说内容的截图:

截图

我的puppeteer代码:

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.");
    }
  })();
});

使用Puppeteer生成一份长篇连续PDF文档是否可行？这是理想的情况。我已经尝试设置自定义CSS打印样式以防止在某些元素后出现分页，但目前为止，我还没有成功。任何帮助都将不胜感激。

编辑：我找到了一个临时解决方案，虽然不是最美观的，但有效。我必须在page.pdf函数中手动定义文档的宽度和高度，如下所示：

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

如果有更好的解决方法，那将是很棒的。但万一有人遇到了这个问题，这就是我的解决方案。

- Aaron Marsden

Answer 1

我尝试制作了一种替代方法来检测滚动元素，以便在将页面打印为PDF时不会被截断。希望这个方法能够达到你的期望：

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()
})()

- Edi Imanto

---

viewportSize 用于什么？ - cuadraman

你说得对，@cuadraman，它需要被移除。谢谢！ - Edi Imanto