Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Issue with Text Encoding in PDF Generation Using Puppeteer #12447

Open
1 of 2 tasks
TaliaBeninson opened this issue May 16, 2024 · 2 comments
Open
1 of 2 tasks

[Bug]: Issue with Text Encoding in PDF Generation Using Puppeteer #12447

TaliaBeninson opened this issue May 16, 2024 · 2 comments
Labels
bug needs-feedback not-reproducible

Comments

@TaliaBeninson
Copy link

TaliaBeninson commented May 16, 2024 •
edited

Minimal, reproducible example

HTML:
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
        body, * {
            font-family: 'Roboto', sans-serif !important;
        }
    </style>
    <meta charset="UTF-8">
</head>

<body>
    <div style="margin: 50px;">
        <h1 style="font-weight: bold; font-size: 24pt; color: #333;" id="departureDate">Departure Date</h1>
        <p style="font-size: 18pt; color: #333;" id="city-pair">City Pair: From - To</p>
        <p style="font-size: 18pt; color: #333;" id="passengerName">Passenger Name</p>
        <p style="font-size: 18pt; color: #333;" id="flightNumber">Flight Number</p>
        <p style="font-size: 18pt; color: #333;" id="AirlineName">Airline Name</p>
    </div>
</body>

</html>

SERVER:
const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');

// Read the HTML template
const htmlTemplate = fs.readFileSync(path.resolve(__dirname, 'ticket-template.html'), 'utf8');

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

        // Set the HTML content
        await page.setContent(htmlTemplate, { waitUntil: 'networkidle0' });

        // Inject data into the template
        await page.evaluate(() => {
            document.getElementById('departureDate').textContent = '2024-05-16 08:30';
            document.getElementById('city-pair').textContent = 'City Pair: New York - London';
            document.getElementById('passengerName').textContent = 'John Doe';
            document.getElementById('flightNumber').textContent = 'Flight Number: AA123';
            document.getElementById('AirlineName').textContent = 'Airline: American Airlines';
        });

        // Wait for fonts to load
        await page.evaluateHandle('document.fonts.ready');

        // Generate the PDF
        const pdfBuffer = await page.pdf({
            path: 'test.pdf',
            format: 'A4',
            printBackground: true
        });

        await browser.close();
        console.log('PDF generated successfully');
    } catch (error) {
        console.error('Error generating PDF:', error);
    }
})();

Error string

no error

Bug behavior

  • Flaky
  • PDF

Background

I've been trying to generate PDFs from HTML templates using Puppeteer. While the HTML renders correctly in a browser, the text appears as gibberish or is incorrectly encoded in the generated PDFs.

Expectation

I expected the generated PDF to display the text as it appears in the HTML template, with the correct font and encoding.

Reality

In reality, the text in the generated PDF appears as gibberish or is incorrectly encoded.
Screenshot 2024-05-16 093357

Puppeteer configuration file (if used)

No response

Puppeteer version

22.8.2

Node version

18.16.0

Package manager

npm

Package manager version

9.5.1

Operating system

Windows
@github-actions GitHub Actions
Copy link

github-actions bot commented May 16, 2024 •
edited

This issue was not reproducible. Please check that your example runs locally and the following:

  • Ensure the script does not rely on dependencies outside of puppeteer and puppeteer-core.
  • Ensure the error string is just the error message.

    • Bad:

      Error: something went wrong
  at Object.<anonymous> (/Users/username/repository/script.js:2:1)
  at Module._compile (node:internal/modules/cjs/loader:1159:14)
  at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
  at Module.load (node:internal/modules/cjs/loader:1037:32)
  at Module._load (node:internal/modules/cjs/loader:878:12)
  at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
  at node:internal/main/run_main_module:23:47

    • Good: Error: something went wrong.

  • Ensure your configuration file (if applicable) is valid.
  • If the issue is flaky (does not reproduce all the time), make sure 'Flaky' is checked.
  • If the issue is not expected to error, make sure to write 'no error'.

Once the above checks are satisfied, please edit your issue with the changes and we will
try to reproduce the bug again.

Analyzer run

@OrKoN
Copy link
Collaborator

OrKoN commented May 16, 2024

I am not able to reproduce on a Mac. Is it only happening on Windows?

The PDF I get:

ticket-template.pdf

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs-feedback not-reproducible
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@OrKoN @TaliaBeninson