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.

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

Google chrome headless is rendering html as mobile view #15784

Closed
inquisitive-stha opened this issue Jan 25, 2024 · 1 comment
Closed

Google chrome headless is rendering html as mobile view #15784

inquisitive-stha opened this issue Jan 25, 2024 · 1 comment
Assignees

Comments

@inquisitive-stha
Copy link

I am using google-chrome headless in laravel to convert HTML to PDF, however, it is rendering as a mobile view instead of rendering as a large screen-sized device.

My code:

$content = '.......';
$html = view('pdf_wrapper', compact('content'))->render();


// Generating a unique temporary file name for the HTML content
$tempHtmlFile = tempnam(sys_get_temp_dir(), 'chrome_html_') . '.html';
$tempPdfFile = tempnam(sys_get_temp_dir(), 'chrome_pdf_') . '.pdf';

// Save the rendered HTML content to the temporary file
file_put_contents($tempHtmlFile, $html);

// Path to the Chrome executable, can be adjusted server environment
$chromePath = '/usr/bin/google-chrome';

// Construct the command to run Chrome in headless mode
$command = sprintf(
    '%s --headless --disable-gpu --no-sandbox --print-to-pdf=%s --window-size=1920,1080 --disable-mobile-emulation --disable-application-cache --force-device-scale-factor=1 --user-agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/112.0.5615.165 Safari/537.36" %s',
    escapeshellcmd($chromePath),
    escapeshellarg($tempPdfFile),
    escapeshellarg($tempHtmlFile)
);

// Execute the command
exec($command);

// Option 1: Serve the PDF to the user
header('Content-Type: application/pdf');
header('Content-Disposition: attachment; filename="downloaded.pdf"');
readfile($tempPdfFile);

@unlink($tempHtmlFile); // Remove the temporary HTML file
@unlink($tempPdfFile); // Remove the temporary PDF file after serving/saving it

exit();

already tried with window-size, disable-mobile-emulation, user-agent. Additionally, I have tried to manipulate this viewport as well. Tested with both of these one by one, but still not working.

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=1920">

It is printing the page just like in mobile view, for example, com-md-3 is showing 100% width instead of showing 25%. CSS working fine with color and styles everything, it looks like it is rendering as mobile devices.

@adamraine
Copy link
Member

This is not the place for help with Chrome headless assistance sorry

@adamraine adamraine closed this as not planned Won't fix, can't repro, duplicate, stale Jan 25, 2024
@GoogleChrome GoogleChrome locked and limited conversation to collaborators Jan 25, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants