Skip to Content
Menu
This question has been flagged
1 Reply
751 Views

I am working on some reports in a custom module while running an instance locally, and it looks great in the QWEB view. I have CSS styles applied through web.report_assets_common. However, when I generate the PDF version no styles are applied at all. I have done googling and searching to try and figure out what is going on, but nothing has worked. Here are the following steps I've tried

  • Added the web.base.url, web.base.url.freeze, and report.url. I know that these are working as intended because I can see the requests for the web assets in the console
  • I have tried both wkhtmltopdf version 0.12.5 and 0.12.6. They behave the same. 
  • I have reinstalled Odoo completely on my computer.
  • Inline styles do work however I would really prefer not to have to use them because they make the styling quite a bit messier and I can't create general report styling files for all of the reports my company needs. 

I'm a bit at a loss of why this isn't working and would really appreciate any insight. Thanks

Avatar
Discard
Best Answer

Hi,

Using a <style> tag inside the report template is a valid and effective solution for applying CSS styles to PDF reports in Odoo. This approach ensures that the styles are embedded directly in the HTML content that is passed to wkhtmltopdf, avoiding issues with external stylesheets not being loaded correctly.


Here’s how you can use the <style> tag in your QWeb report template:


Eg:

<t t-call="web.external_layout">

            <div class="page">

                <!-- Add a <style> tag for CSS -->

                <style>

                    h1 {

                        color: red;

                        font-size: 24px;

                    }

                    p {

                        color: blue;

                        font-size: 14px;

                    }

                    .custom-class {

                        background-color: #f0f0f0;

                        padding: 10px;

                    }

                </style>


                <!-- Report Content -->

                <h1>Custom Report</h1>

                <p>This is a sample report with embedded styles.</p>

                <div class="custom-class">

                    This is a styled div.

                </div>

            </div>

        </t>


Alternative: Use a Common <style> Template

If you want to reuse styles across multiple reports, you can define a common <style> template and inherit it in your reports


Hope it helps

Avatar
Discard
Related Posts Replies Views Activity
1
May 25
117
1
Nov 24
762
1
Nov 24
828
0
Aug 24
909
2
Aug 24
1371