Chrome无头渲染完全错误到PDF

我想用多个nvd3图表打印一个页面到pdf使用木偶。当通过Chrome浏览器使用打印功能我得到下面的体面输出（不介意的蓝色边框）：Chrome无头渲染完全错误到PDF

当我试图通过操纵木偶的人使用Chrome无头访问同一页面，我得到这种输出，而不是，跨越了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页面的确切大小。

来源

2017-08-29 Totem

你是否已经尝试过使用* ['page.emulateMedia（）']（https://github.com/GoogleChrome/定义*媒体类型puppeteer/blob/master/docs/api.md＃pageemulatemediamediatype）在创建PDF之前？ – flozia

我正面临类似你的问题。过了一会儿，我是能够解决其中的一些：

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

来源

2017-09-26 19:17:00

Chrome无头渲染完全错误到PDF

回答

相关问题