Puppeteer PDF renders but missing content

Steps to reproduce

Install Puppeteer and render a PDF as a URL from Mac OS Mojave 10.14.5. When the PDF is rendered it is missing data from what the page looks like when rendered normally in a browser.

Tell us about your environment:

• Puppeteer version: 1.17.0
• Platform / OS version: 10.14.5
• Node.js version: 12.2.0 && 12.5.0

This problem does not exist when we test the same app on a Ubuntu 18.0.4 system.

What steps will reproduce the problem?

Install Puppeteer and create a PDF from an Node.js Express API endpoint.

Please include code that reproduces the issue.

await page.goto(url);
  if (data.waitFor) {
      try {
          await page.waitFor(data.waitFor)
      } catch(error) {
          throw new Error(error);
      }
  }

  const pdfBuffer = await page.pdf({
    format: 'A4',
    margin: {
      top: '20px',
      left: '20px',
      right: '20px',
      bottom: '20px',
    }
  });

  await browser.close();

What is the expected result?

The PDF should render and have all the same data on the page that shows when rendered in a browser.

What happens instead?

The PDF is rendered but text is missing. Even text from the same table shows in some columns but not in others.

[wufeng87]

@wuno How you solve this problem? Thanks.

[gllrm-andres]

I have separate files for the template and the styles.

everything works perfect until I needed to set the font and it wouldn’t take it using page.addStyleTag

<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400&display=swap');
body { font-family: 'Nunito', sans-serif; }
</style>

  async generatePdf(): Promise<Buffer> {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    const content = await this.getHtmlContent();
    await page.setContent(content, { waitUntil: 'networkidle2' });
    await page.addStyleTag({ path: this.stylesPath });
    const pdf = await page.pdf({
      printBackground: true,
      format: 'letter',
    });
    await browser.close();
    return pdf;
  }