search

beganovich / snappdf

Convert webpages or HTML into the PDF file using Chromium-powered browsers.
MIT License
187 stars 15 forks source link

Asset Mapper Symfony, CSS not loaded #40

Closed Shotman closed 6 months ago

Shotman commented 6 months ago

Hello I'm making a PDF generation service for Symfony but the problem at the moment is that CSS is not loaded.

I'm using asset mapper, and it's using and import map that looks like this : 

<link rel="stylesheet" href="/assets/vendor/dsfr-connect/dist/bootstrap-v5/index-509598e54809cbcec6f14a653b5b4184.css">
<link rel="stylesheet" href="/assets/vendor/remixicon/fonts/remixicon.min-c11eabb77d5b3e936fe7a7e069bc73f3.css">
<link rel="stylesheet" href="/assets/vendor/@ymlluo/bs5dialog/dist/bs5dialog-94bb2e4c5727f68fed88bf705ae450f9.css">
<link rel="stylesheet" href="/assets/styles/font-3c59388b15873239de75a9806f3f97b9.css">
<link rel="stylesheet" href="/assets/styles/app-43f658c248975f4ea3e2de670fac6896.css">
<script type="importmap" data-turbo-track="reload">
{
    "imports": {
        "app": "/assets/app-19679c54833ed4dee984364c1c4fee28.js",
        "/assets/bootstrap.js": "/assets/bootstrap-c423b8bbc1f9cae218c105ca8ca9f767.js",
        "bootstrap": "/assets/vendor/bootstrap/bootstrap.index-f0935445d9c6022100863214b519a1f2.js",
        "htmx.org": "/assets/vendor/htmx.org/htmx.org.index-023ae86a082913526422a6063298f898.js",
        "@ymlluo/bs5dialog/dist/bs5dialog.js": "/assets/vendor/@ymlluo/bs5dialog/dist/bs5dialog-7e0dc5af3919ec81ab9bac92700f584a.js",
        "dsfr-connect/dist/bootstrap-v5/index.css": "data:application/javascript,",
        "remixicon/fonts/remixicon.min.css": "data:application/javascript,",
        "@ymlluo/bs5dialog/dist/bs5dialog.css": "data:application/javascript,",
        "/assets/styles/font.css": "data:application/javascript,",
        "/assets/styles/app.css": "data:application/javascript,",
        "@symfony/stimulus-bundle": "/assets/@symfony/stimulus-bundle/loader-e1ee9ace0562f2e6a52301e4ccc8627d.js",
        "@popperjs/core": "/assets/vendor/@popperjs/core/core.index-ceb5b6c0f9e1d3f6c78ef733facfdcda.js",
        "@hotwired/stimulus": "/assets/vendor/@hotwired/stimulus/stimulus.index-b5b1d00e42695b8959b4a1e94e3bc92a.js",
        "/assets/@symfony/stimulus-bundle/controllers.js": "/assets/@symfony/stimulus-bundle/controllers-9d42643c079ab11f27a3a9614f81cc2f.js",
        "/assets/@symfony/ux-turbo/turbo_controller.js": "/assets/@symfony/ux-turbo/turbo_controller-ce5e32dafdec0b7752f02e3e2cb25751.js",
        "/assets/controllers/hello_controller.js": "/assets/controllers/hello_controller-55882fcad241d2bea50276ea485583bc.js",
        "@hotwired/turbo": "/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js"
    }
}
</script>
<!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support -->
<script async src="https://ga.jspm.io/npm:es-module-shims@1.8.0/dist/es-module-shims.js" data-turbo-track="reload"></script>
<link rel="modulepreload" href="/assets/app-19679c54833ed4dee984364c1c4fee28.js">
<link rel="modulepreload" href="/assets/bootstrap-c423b8bbc1f9cae218c105ca8ca9f767.js">
<link rel="modulepreload" href="/assets/vendor/bootstrap/bootstrap.index-f0935445d9c6022100863214b519a1f2.js">
<link rel="modulepreload" href="/assets/vendor/htmx.org/htmx.org.index-023ae86a082913526422a6063298f898.js">
<link rel="modulepreload" href="/assets/vendor/@ymlluo/bs5dialog/dist/bs5dialog-7e0dc5af3919ec81ab9bac92700f584a.js">
<link rel="modulepreload" href="/assets/@symfony/stimulus-bundle/loader-e1ee9ace0562f2e6a52301e4ccc8627d.js">
<link rel="modulepreload" href="/assets/vendor/@popperjs/core/core.index-ceb5b6c0f9e1d3f6c78ef733facfdcda.js">
<link rel="modulepreload" href="/assets/vendor/@hotwired/stimulus/stimulus.index-b5b1d00e42695b8959b4a1e94e3bc92a.js">
<link rel="modulepreload" href="/assets/@symfony/stimulus-bundle/controllers-9d42643c079ab11f27a3a9614f81cc2f.js">
<link rel="modulepreload" href="/assets/@symfony/ux-turbo/turbo_controller-ce5e32dafdec0b7752f02e3e2cb25751.js">
<link rel="modulepreload" href="/assets/controllers/hello_controller-55882fcad241d2bea50276ea485583bc.js">
<link rel="modulepreload" href="/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js">
<script type="module" data-turbo-track="reload">import 'app';</script>

And when I generate the PDF like that : 

$snappdf = new Snappdf();
$snappdf->setHtml($this->twig->render($template, $data););
$snappdf->waitBeforePrinting(10000);
$output = $snappdf->generate();
return $output;

The css is not loaded in the pdf whereas if I just return the HTML on it's own my browser loads the css without issues.

I've looked with Symfony/Twig/AssetMapper ways to change urls to absolute ones with no success

I've also tried adding a <base href="absolute_website_origin" /> to my HTML but doing that makes the PDF generation not working it just hangs forever

So is there anything I could do to make it work ?

Thanks

Shotman commented 6 months ago

Closing since adding the base tag once again, after trying many other things it works, sooo no idea what happened if I figure it out I'll add a comment to explain what it was

Edit : I figured out the exact issue, when using the assetMapper in dev mode it doesn't work because of internal Symfony routing. So the solution is for PDF rendering testing you have to compile the assets in production mode temporarly with asset-map:compile and then it works perfectly ! And after than to go back to normal dev mode, just delete the asset folder in the public folder. Hope it will help people who have the same problem