search

spiritix / php-chrome-html2pdf

A PHP library for converting HTML to PDF using Google Chrome
MIT License
112 stars 29 forks source link

ProtocolError: Protocol error (Page.printToPDF): Printing failed #38

Closed NiklasBr closed 2 years ago

NiklasBr commented 2 years ago

Getting the following error when attempting to create a PDF:

Binary error: /var/www/pimcore/vendor/spiritix/php-chrome-html2pdf/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:230
                error: new Errors_js_1.ProtocolError(),
                       ^

ProtocolError: Protocol error (Page.printToPDF): Printing failed
    at vendor/spiritix/php-chrome-html2pdf/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:230:24
    at new Promise (<anonymous>)
    at CDPSession.send (vendor/spiritix/php-chrome-html2pdf/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:226:16)
    at Page.createPDFStream (vendor/spiritix/php-chrome-html2pdf/node_modules/puppeteer/lib/cjs/puppeteer/common/Page.js:2085:50)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Page.pdf (vendor/spiritix/php-chrome-html2pdf/node_modules/puppeteer/lib/cjs/puppeteer/common/Page.js:2114:26)
    at async Converter.run (vendor/spiritix/php-chrome-html2pdf/lib/Converter.js:37:24)
    at async vendor/spiritix/php-chrome-html2pdf/index.js:23:20 {
  originalMessage: 'Printing failed'
}

Node.js v18.6.0

According to the SO question it should be possible to resolve:

$converter->setOptions([
    'headless' => true,
]);

But that did not work, likely because it should probably be set in Converter.js. Maybe you can help resolve it?

spiritix commented 2 years ago

The library is already using headless mode, I think it's a problem related to memory limits exceeded: https://github.com/puppeteer/puppeteer/issues/8070

Are you trying to convert a file of very large size?

NiklasBr commented 2 years ago

A single page with one medium-sized image and some SVG:

<!DOCTYPE html>
<html lang="nb">
<head>
    <meta charset="UTF-8">
    <title>PDF Frontpage</title>
        <link rel="stylesheet" type="text/css" media="all" href="https://localhost/static/static.6ed4d.css">
</head>

<body class="pdf">

    <main class="page grid-wrapper custom-background">
    <div class="decoration grid-item-3-4-5-2 fill-primary"></div>
    <div class="decoration grid-item-1-4-7-2 fill-primary"></div>
    <div class="decoration grid-item-1-2-9-2 fill-primary"></div>
    <div class="decoration grid-item-3-6-1-4 fill-secondary"></div>

            <div class="logo grid-item-1-2-1-4 fill-primary logo-color">
            <svg viewBox="0 0 339.03 357.51" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet">
    <path d="M0,.14H10.46l21,47.78L52.11.14H62.63V73.48H51.51V27.75h-.25L35.92,63H26.66L11.32,27.75h-.2V73.48H0Z"/>
    <path d="M148.58,0h46.83V10.5H159.69V31.43H190.2v9.86H159.69V62.82h35.72V73.33H148.58Z"/>
    <path d="M292.2,0h11.12V62.82h35.71V73.33H292.2Z"/>
    <path d="M7.51,142.68H35.93q10.81.09,16.24,5.43t5.49,14.23A16.915,16.915,0,0,1,55.49,171a13.991,13.991,0,0,1-3.29,3.72,23.793,23.793,0,0,1-5.33,3.37v.2a14.8,14.8,0,0,1,9.06,6.29,20.579,20.579,0,0,1,2.87,10.61q-.1,9.51-5.94,15A19.59,19.59,0,0,1,38.39,216H7.51Zm11.11,9.91v21h16q6.09,0,9-3.17a9.918,9.918,0,0,0,2.92-7.34,10.468,10.468,0,0,0-2.92-7.5q-2.86-2.87-9-3Zm0,30.88v22H35.73q6.18-.09,9-3.37a11.1,11.1,0,0,0,2.87-7.64,11.268,11.268,0,0,0-2.87-7.75q-2.86-3.169-9-3.27Z"/>
    <path d="M166.75,185.84l-22.09-43.16h11.77l15.55,32.54,15.54-32.54h11.77L177.2,185.84V216H166.75Z"/>
    <path d="M6.77,284.21H53.6v10.52H17.88v20.92H48.37v9.86H17.88V347H53.6v10.51H6.77Z"/>
</svg>

        </div>

            <h1 class="heading text-color grid-item-4-5-2-1 grid-align-end">Test frontpage 1</h1>
        <h2 class="subheading text-color grid-item-4-5-3-1">A subheading</h2>

                    <div class="version grid-item-8-9-12-13 fill-tertiary">
            V1<br>
            2022
        </div>
                                                <div class="bu grid-item-1-2-5-2 bu-background-color bu-text-color">
                                    <svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
    <path d="M27.15,11.77a.57.57,0,0,0-.64-.44.55.55,0,0,0-.44.64,12.57,12.57,0,0,1,.19,2.2A12.28,12.28,0,1,1,14,1.89h0A12.74,12.74,0,0,1,15.72,2a.57.57,0,0,0,.63-.47.55.55,0,0,0-.47-.62h0A13.36,13.36,0,1,0,27.23,16.05,13.66,13.66,0,0,0,27.15,11.77Z"/>
    <path d="M19.4,10.71,11.1,19a.53.53,0,0,0,0,.75l0,0a.53.53,0,0,0,.76,0h0l11-11-6.78,1.56L25,1.42a.54.54,0,0,0,0-.76v0a.53.53,0,0,0-.75,0l0,0L12.65,12.27Z"/>
</svg>
                    <h3>Energi</h3>
                            </div>
                            <div class="bu-label grid-item-4-1-1-1 grid-align-end bu-background-color">
                    <h5 class="bu-text-color">Energi</h5>
                </div>
                        </main>

            <style media="all">
            .fill-primary {
                background-color: #6abe8a;
            }
            .fill-secondary {
                background-color: #388053;
            }
            .fill-tertiary {
                background-color: #fff28c;
            }
            .text-color {
                color: #f6f1ec;
            }

            .logo-color,
            .logo-color svg {
                color: #ffffff;
                fill: currentcolor;
            }

            .bu-background-color {
                background-color: #f6f1ec;
            }
            .bu-text-color,
            .bu-text-color svg{
                color: #003e20;
                fill: currentcolor;
            }

            .pdf .page.custom-background {
                background-color: #ffffff;
                                background-image: url("http://localhost/Milj%C3%B8bilde/30231/image-thumb__30231__large_print/hspennfjell.jpg");
                            }
        </style>
    </body>
</html>

More complete PHP as well:

    public function renderPdf(string $template, array $viewParams = []): ?string
    {
        $options = [
        'landscape' => false,
        'format' => 'A4',
        'width' => '210mm',
        'height' => '297mm',
        'preferCSSPageSize' => true,
        'printBackground' => true,
        'omitBackground' => true,
        'displayHeaderFooter' => true,
        'headless' => true,
        'headerTemplate' => $this->templateEngine->render('includes/header.pdf.twig', $viewParams),
        'footerTemplate' => $this->templateEngine->render('includes/footer.pdf.twig', $viewParams),
      ];

        $body = new StringInput();
        $body->setHtml($this->templateEngine->render($template, $viewParams));

        $converter = new Converter($body, new StringOutput());
        $converter->setOptions($options);

        return $converter->convert()?->get();
    }
spiritix commented 2 years ago

Can you try to convert a very simple HTML page, without any options? If that works, please narrow it down until you find the line or block that's causing the problem.

NiklasBr commented 2 years ago

Same error with this HTML, no loaded CSS or anything like that:

<!DOCTYPE html>
<html lang="nb">
<head>
    <meta charset="UTF-8">
    <title>myTestTitle</title>
</head>
<body>
Test
</body>
</html>

And at the end we are here:

image

spiritix commented 2 years ago

Okay, then it's definitely an error related to the machine/server you're running the code on, because I can't reproduce it with the same HTML. The error comes from Puppeteer, this library forwards it to PHP. You can try to raise an error there, maybe they can give you some ideas on what could be wrong with the machine configuration...

NiklasBr commented 2 years ago

I think it was Symfony Web Toolbar which was the culprit here, it got injected at a later stage in the HTML so was never seen at the above step in the debugging. Thanks for helping!