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.
Steps to reproduce:
/usr/bin/google-chrome --headless --disable-gpu --print-to-pdf=output.pdf --window-size="1920,1080" https://www.getbootstrap.com/
Chromium unattended printing is limited to just enough to maintain.
NOTE even "Window Size" may not be as expected so for a square 1920x1920 PNG I have to use
--window-size="1936,2014"because Chrome trims it in both directions as if in a frame border.For PDF there is only default 612 pt X 812 pt (American portrait "Letter" size). That is all, unless edited at either end. Note Edge Browser incorrectly says size 288 × 373 mm (portrait), so it is correct about orientation but gets its Metric Units ratio 1.333% wrong !
Other options are available for other functions (such as, you can switch off the top and bottom margin head & foot overprint). See the unofficial list at https://peter.sh/experiments/chromium-command-line-switches/
If the site has set a CSS design for "Media Print Size" it is honoured. So one work around is to edit a copy of the HTML by replacing
<body>with something like :-The other alternative is to use a robotic browser such as puppeteer. Which is allowed to add preferences, like Landscape and other size controls, as if the user had made those choices.