Javascript Chrome无头渲染完全错误到pdf

我正在尝试使用Puppeter将包含多个nvd3图表的页面打印为pdf格式。通过Chrome浏览器使用打印功能时，我获得了以下良好的输出（不要介意蓝色边框）：

当我尝试使用chrome headless via Puppeter访问同一页面时，我得到了这个输出，跨越了3页：

这是我正在使用的代码：

const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.setCookie({
        name: 'cookie-a',
        value: '...',
        domain: 'example.com'
    });
    await page.setCookie({
        name: 'cookie-b',
        value: '...',
        domain: 'example.com'
    });

    await page.goto('http://example.com/search/?bookmark=bot-overview', {waitUntil: 'networkidle'});

    setTimeout(async function () {
        await page.pdf({ path: 'page.pdf', format: 'A4', landscape: true });
        browser.close();
    }, 10000);
})();

---

我还尝试将高度和宽度固定到像素值cm和mm，但这不会影响输出。请注意，整个页面都是通过页面及其打印媒体样式表引导的。我还为打印介质添加了几个css规则（其中包括蓝色边框）。其中一条规则要求整个页面的大小为297mmx210mm，即A4纸的大小。

我遇到过类似您的问题。一段时间后，我修复了其中一些：

    const puppeteer = require('puppeteer');
    const devices = require('puppeteer/DeviceDescriptors');

    (async () => {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        const url = 'https://example.com';

        await page.emulateMedia('screen'); //<--
        await page.goto(url, {waitUntil: 'networkidle'});

        await page.screenshot({path: 'full_img.png', fullPage: true});
        await page.pdf({
          path: 'the_file.pdf', 
          format: 'A4', 
          printBackground: true, //<---
          displayHeaderFooter: true, //<---
          scale: 1,
          landscape: false,
          pageRanges: ""
      });
    })();

const puppeter=require（'puppeter'）；
const devices=require（'puppeter/devicedescriptor'）；
（异步（）=>{
const browser=wait puppeter.launch（）；
const page=wait browser.newPage（）；
常量url=https://example.com';
wait page.emulateMedia（'screen'）；//在创建PDF之前，您是否已尝试定义使用的媒体类型？
wait page.emulateMedia（'screen'）；
为我解决了这个问题！