Snappy grav PDF images and css not working

I have everything set up both locally in Windows with WAMP (installed windows binaries) and on server Ubuntu 18.04. It opens the PDF correctly but there's no images and no style. It only prints, title, date and {{content}}. Everything else is stripped even the html outside {{content}}

Obviously I have absolute urls set up to true. I'm not sure what I'm doing wrong.

I do not know if I understand correctly. Did you install it locally on Windows and online on Ubuntu?
If so you can indicate the link of the site.
Another thing: which theme are you using?

Yes, I have installed both locally and on server:

Local: Windows 10 with WAMP php 7.2 with windows 64bit binaries
Server: DigitalOcean VPS Ubuntu 18.04, I had to install libpng12 and libxrender1 because it was throwing errors.

It does work without errors but it basically only pics up the raw html inside the {{content}} everything else outside is not rendered. I tried inserting images and html into the markdown (that goes into {{content}} and it picks that as well, so images are working, and absolute paths are working too, but styles and classes do not, even inside {{content}}

Right now the version on the server is without the plugin because it's on revision to the client, but there's not much you can see.

I've tried on different pages and different templates and it does the same. I'm using a custom theme that extends Quark and I have bootstrap 4 on that, I'm not using the Quark css and js, but that shouldn't mess with the plugin, i think.

Can you attach a pdf created by the plugin?
Have you changed the stable version of Quark or is it the test release v2.0.0-beta.1?

UPDATE:
If the following is true, the above is not necessary.

I think I found something ...
Does the text in the pdf file look like html? that is, for example:
<p> text text etc. </p>

If so, I will have to make changes by adding to each variable twig {{ var |raw }}
because the Quark theme from version 1.2.2 (the last stable) works with Twig auto-escaping turned on

Here is the PDF: https://drive.google.com/file/d/1mKyn4DyphXd6O2RlUpB0aW5LML0bHHcJ/view?usp=sharing

It would't let me upload a pdf so I put it on drive.
This is an example page, it's not the one I need in the end but works to demonstrate. As you can see the image is full width but it has a class attached in the markdown. The button you see after the image is pure html, but it's not reading the styles applied to those classes either.
Plus all of the html before and after is not rendered (I have a header image before the breadcrumb and then a slider with images after the content.

I have the last stable version of quark 1.2.2

No the text as you can see doesn't have html markup, html inside the content is actually properly rendered, it's everything else that's ignored, apart from breadcrumbs weirdly.

I'm calling the plugin like this: {{ snappygrav( page.route ) }} and it gives me the button with the proper functionality.
I don't have a blog on the site, I left the folder blog setting untouched. I just have a list of products with categories and tags, but I'll need the pdf for a custom page where I actually don't have {{content}} it's all template generated html.

If I should try modifying the plugin template in some way to test it let me know.
Thanks again for the help, I hope we find a solution.

Okay:

1. Snappy is a wrapper for wkhtmltopdf
2. Ensure that wkhtmltopf gets the correct styles (like: check media attributes etc.)
3. ensure that the used styles work with wkhtml2pdf (hint: bootstrap 4 uses flexbox which might be problematic.

HTH
Chris

Maybe this is part of your issue: https://github.com/KnpLabs/snappy/blob/master/doc/faq.md#q-how-to-convert-page-with-relative-links-from-stdin--how-to-use-relative-media-urls

Thanks for the reply.
wkhtmltopdf doesn't get any styles at all because it does't get any html outside {{content}}, so no doctype, no head, no styles and nothing, only what's inside {{content}} and breadcrumbs. Not sure why.
Now that you mention this I want to check if I put styles as html inside the markdown so they go into {{content}} just to see if wkhtmltopdf works with styles.

Also I have se up absolute urls in the configuration, which is recommended to do, that's why images inside {{content}} do get included in the pdf.

I just saw there's an update on grav admin and quark theme. I'm gonna try update and see if that makes any difference.

EDIT:
I just tried to inserting my css as a stylesheet link and other random html into the {{content}} and it works perfectly. I now get the proper font and the text and styles on those parts of html inserted. I eve get icon fonts working. So wkhtmltopdf is working properly, but I don't know why it only gets the {{content}} and everything else is stripped out, apart from the breadcrumb.

When you look at the plugin:

https://github.com/iusvar/grav-plugin-snappygrav

The default template seems to be https://github.com/iusvar/grav-plugin-snappygrav/blob/master/templates/snappygrav.html.twig which extends https://github.com/iusvar/grav-plugin-snappygrav/blob/master/templates/partials/snappy-base.html.twig.

You might want to override snappy-base.html.twig in your custom theme.

Thanks for the help, I tried duplicating the template on my theme folder and extending my actual base file that contains css and everything else. Now it does pick the css but I see a blank page and then the footer gets displayed with some styles and images applied correctly but most of it not displaying properly of completely out of the grid. The content is now disappeared, or maybe out of the grid.
You mentioned bootstrap 4 flexbox might be problematic? Why is that? cause all my site uses flexbox so that might be the reason I'm not seeing most of the content now.

EDIT: flexbox problem aside,extending to my actual base is including header and footer, which i actually don't need in the pdf, but it's not including the template html of the page i want to render in the pdf.
From what I understand then I need to modify the snappygrav.html.twig and have there all the html I need for my actual pdf.

Now that I understand how this plugin actually work I think it's not gonna work for my needs, since I need to render a pdf with the content of a form response in ajax that has a custom template. The response is dynamic so I don't think there's a way to pass that data to the snapgrav plugin.

I've also been trying various javascript ways to create a pdf like html2canvas and jspdf but with no luck, they always crop the "screenshot" at my viewport and I can't get the entire page rendere.

I guess I need to abandon the pdf export thing.

@filo91:
The response is dynamic so I don’t think there’s a way to pass that data to the snapgrav plugin.

There's no way using the plugin directly but you can use the libraries it installs and basically copy a lot of what it does.

I'm attempting something similar now because Snappygrav doesn't seem to work within the admin/data manager area. I can't help with the routing and where you source your dynamic data from, but this is what I have (so far) hacked into the data manager.

(For the record, I don't want to do it this way because I don't want to manage a forked plugin.)

  $twig->itemData = $this->getFileContent($type, $dataFile); // set Twig's data
  $html = $twig->processTemplate('partials/item.html.twig'); // process with template
  $this->servePDF($html, $filename); // see below

and

    protected function servePDF($html, $export_filename='data.pdf')
    {
        // a lot of this is copied straight from the snappygrav plugin .... 
        // Placement/Path of the wkhtmltopdf program
        $wk_absolute_pos = ( $this->config->get('plugins.snappygrav.wk_absolute_pos') ? true : false );
        $wk_path = $this->config->get('plugins.snappygrav.wk_path');
        if( $wk_absolute_pos ) {
            //true, absolute, under o.s.
            $wk_path = ( empty($wk_path) ? '/usr/local/bin/wkhtmltopdf' : $wk_path );
        } else {
            //false, relative, under plugin
            $wk_path_prepend = GRAV_ROOT .'/user/plugins/snappygrav/';
            $wk_path = ( empty($wk_path) ? $wk_path_prepend . 'vendor/h4cc/wkhtmltopdf-i386/bin/wkhtmltopdf-i386' : $wk_path_prepend . $wk_path );
        }

        // Check if wkhtmltopdf-i386 is executable
        if (file_exists($wk_path)) {
            $perms = fileperms( $wk_path );
            if($perms!=33261){
                @chmod($wk_path, 0755); //33261
            }
        }

        $snappy = new \Knp\Snappy\Pdf( $wk_path );

        $pdf = $snappy->getOutputFromHtml($html);

        // unlike the plugin, we just serve it from here rather than provide a button
        header('Content-Type: application/pdf');
        header("Content-Disposition: attachment; filename=\"{$export_filename}\"");
        echo $pdf;
        exit();
    }

Hope you can use that for inspiration 🙂

Thanks a lot, that looks pretty cool, so you use that to save a pdf of the data that you visualize with the data manager plugin? I could actually save my data first and then create the pdf like you do, or modify that to create that directly.
To achieve that did you create a new plugin with this php?
I'm asking because I have never touched php directly inside grav since there was no need up until this point and my php skills are probably a bit rusty, but I'm sure I could manage that.

tks for your share, c'mon up yeah yeah