通过 puppeteer 生成时，PDF 末尾缺少内容答案

【问题标题】：Content is missing at the end of the PDF while generated through puppeteer通过 puppeteer 生成时，PDF 末尾缺少内容
【发布时间】：2020-08-26 18:22:09
【问题描述】：

我正在尝试通过将 URL 发送给 puppeteer 来生成 PDF。我将特定的高度和宽度作为 page.pdf 方法的选项。我能够获得 PDF 的确切高度，但最后缺少一些内容。而且只有更高高度的 PDF 才会发生这种情况。

下面是我的代码：

  let pdf = {};
        const puppeteerArguments = [];
        
        puppeteerArguments.push('--disable-web-security', '--allow-running-insecure-content', '--no-sandbox',
            '--disable-setuid-sandbox',
            '--disable-gpu',
            '--no-first-run',
            '--hide-scrollbars',
            '--disable-dev-shm-usage',
            '--allow-cross-origin-auth-prompt',
            '--enable-hardware-overlays',
            '--start-fullscreen'
            );


        const browser = await puppeteer.launch({headless: true, args: puppeteerArguments, sloMo: 0});

        const page = await browser.newPage();

        const {url} = payload;

        await page.setViewport({
            width: 1024,
            height: 7500,
            deviceScaleFactor: 1,
            isMobile: false
        });

        page.setExtraHTTPHeaders({
            "cookie": '******',
        });


        await page.goto(url, {waitUntil: 'networkidle0', timeout: 0}).then(() => {
            console.log('load success');
        });

        await page.emulateMedia('screen');

        await page.addStyleTag({
            content: `
                  html {
                    -webkit-print-color-adjust: exact !important;
                    -webkit-filter: opacity(1) !important;
               }`
        });

        const selector = '.widgetsRendered'
        await page.waitForFunction(selector => !!document.querySelector(selector), {polling: 600, timeout: 0}, selector);
        
        await page.waitFor(20000);

        const path = `fullPage.pdf`;

        pdf = await page.pdf({
            path,
            width: 1560 + 'px',
            height: 7500 + 'px',
            scale: 1,
            displayHeaderFooter: false,
            margin: 'none',
            printBackground: true,
        });
        return pdf;

我正在使用"puppeteer": "^2.1.1"

下面是问题的图片。

有人可以帮忙吗？

【问题讨论】：

如果你想得到一些答案，你需要在你的问题上做更多的工作。至少考虑发布加载内容并将其转换为 PDF 的代码。
用代码编辑了我的问题，TQ 的建议@SlavaIvanov
在goto 中考虑使用networkidle0； networkidle2 不保证页面完全加载； height 的评估有一些神奇的数字 200，高度发生了一些奇怪的事情，需要调试；在pdf 中，您设置了存储文档的路径并同时返回它的二进制文件，为什么；您只有一页的范围，但是您发布的屏幕截图显示了页面分隔符，所以至少有 2 页，它是什么。我认为没有人为您提供解决方案，这是您需要调试的东西。
我建议将浏览器设置为headed模式，注释掉PDF转换部分，看看你的内容是如何加载的；使用开发工具获取容器的大小，与您计算的评估结果进行比较。基本上在 PDF 转换之前正确调试它，并在查看您正在设置的 pdf 选项之后。只需花一些时间调试您的代码。最好的问候，
@SlavaIvanov 感谢您的回复，我调试了代码，并且在 devtools 中它给了我正确的高度。忽略上述代码中的高度计算并返回pdf。我在浏览器中检查了页面的高度，并在pdf options 中手动将高度添加到上述代码中。通过这个，我可以获得 PDF 的给定高度，但最后缺少内容。我发布的图片有小部件，您看到的中断是小部件结束，但不是分页符。

标签： pdf puppeteer chromium

【解决方案1】：

从addStyleTag 方法的内容中删除-webkit-filter: opacity(1) !important; 解决了我的问题。

【讨论】：