クロムヘッドレスレンダリングが完全に間違っているpdf

Question

私はpuppeteerを使ってpdfにいくつかのnvd3チャートを含むページを印刷しようとしています。私は（青国境を気にしない）、次のまともな出力を得る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規則を追加しました。これらの規則の1つは、ページ全体を297mm×210mm（A4ページの正確なサイズ）にすることを強制する。

Answer 1

私はあなたのような問題に直面していました。

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