如何根据 HTML 内容自动找到正确的 PDF 高度，以免在页面中生成无用的空格或丢失内容？答案

【问题标题】：How to automatically find the right PDF height, according to the HTML content, in order to NOT generate useless blank space or miss content in page?如何根据 HTML 内容自动找到正确的 PDF 高度，以免在页面中生成无用的空格或丢失内容？
【发布时间】：2021-08-06 17:29:50
【问题描述】：

(async () => {
    const baseUrl = 'example.com';
    const browser = await puppeteer.launch({ headless: true});
    const context = await browser.createIncognitoBrowserContext();
    const page = await context.newPage();

    function delay(time) {
        return new Promise(function (resolve) {
            setTimeout(resolve, time)
        });
    }

    await page.goto(baseUrl);
    await page.setViewport({
        width: 1200,
        height: 800
      });

    await page.waitForSelector('[name="loginfmt"]');
    await page.type('[name="loginfmt"]', 'abc@amazon.com');
    await page.click('[type="submit"]');
    delay(1000);
    await page.authenticate({ username: `abc@amazon.com`, password: `abc@123` });

    await delay(2000);
     async function autoScroll(page){
         await page.evaluate(async () => {
           await new Promise((resolve, reject) => {
              var totalHeight = 0;
              var distance = 10000;
               var timer = setInterval(() => {
                     var scrollHeight = document.body.scrollHeight;
                     window.scrollBy(0, distance);
                    totalHeight += distance;
    
                    if(totalHeight >= scrollHeight){
                         clearInterval(timer);
                        resolve();
                    }
                 }, 100);
            });
         })
     }
    await autoScroll(page);

    await delay(2000);
    await page.pdf(
        {
            path: "1.pdf",
            printBackground: true,
           
        }
    )

    browser.close();
})()

这是我从GitHub 和Stack Overflow 获得的关于页面自动滚动的方法。但是生成后我无法在我的 pdf 中获取整个页面。我想获得一个水平和垂直滚动的解决方案，这样我生成的 pdf 中就不会遗漏任何内容。

目前一直在使用下面的代码来获取完整的 pdf。这不是获取 PDF 整页的动态方法，因为我手动给出了高度 15000px。对于当前页面，它可以正常工作，但对于高度小于15000px 的其他页面，它会导致最后出现空白区域，这不是我们想要的方式。

await page.pdf(
        {
            path: "1.pdf",
            printBackground: true,
            height: "15000px"
           
        }
    )

查看我们是否可以动态呈现整个页面的height 和width，以便我可以通过将它们存储在page.pdf function 之前的变量中来将它们传递到page.pdf，这将给出正确的尺寸单个页面正确。

很久以来我一直在尝试解决这个问题。如果我能解决这个问题，那将非常有帮助。

【问题讨论】：

标签： javascript pdf-generation puppeteer horizontal-scrolling vertical-scrolling

【解决方案1】：

页面高度取决于页面 CSS。

当我们尝试给“ctrl+P”时，我们可以看到页面CSS是否默认支持自动滚动功能。

如果是，那么我们可以默认获取。

如果否，则必须更改页面 CSS 以支持自动滚动。

【讨论】：