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

回答

相關問題