2

I am having an issue with trying to create a printable version of a page I have created, where I try to print the page but the background colour disappears. I have tried adding -webkit-print-color-adjust: exact !important; to the styles but am unable to get the colours to print properly and have been unsuccessful in finding anything related or similar to this issue elsewhere.

I have managed to replicate this in a minimal way below.

POCPage.page

<apex:page>
    <apex:includeLightning/>
    <head>
        <script>
            var load = () => {
                $Lightning.use('c:POC', () => {
                    $Lightning.createComponent('c:Coloured_Bar', {}, 'POC', () => {
                        console.log('Coloured bars created');
                    });
                });
            };
        </script>
    </head>
    <body onload="load();">
        <div id="POC"></div>
    </body>
</apex:page>

POC.app

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="Coloured_Bar" />
</aura:application>

Coloured_Bar.cmp

<aura:component>
    <div>
        <div class="bar red"></div>
        <div class="bar green"></div>
        <div class="bar blue"></div>
    </div>
</aura:component>

Coloured_Bar.css

.THIS {
    -webkit-print-color-adjust: exact !important;
}

.THIS .bar {
    width: 100px;
    height: 50px;
    margin-bottom: 2rem;
    border: 1px solid black;
}

.THIS .red {
    background: red;
}

.THIS .green {
    background: green;
}

.THIS .blue {
    background: blue;
}

What this page produces is just something stupid like this: Bars display with their correct background colours

But when you try to print the page the preview and the actual printed page both display like this: No colours in the printed page

Is there a known issue in trying to print lightning components or is there something(probably obvious) that I am missing?

Thanks

Edit

Have also tried adding an @media print { .THIS { -webkit-print-color-adjust: exact !important; } } to the components stylesheet with no luck.

Edit

I have tried this with several browsers just in case this was a chrome issue but it exists across the board with browsers

Improve this question
3
  • What printer driver are you using? Have you enabled print background colors and graphics in the print driver?
    – crmprogdev
    Apr 24, 2018 at 15:40
  • @crmprogdev Unsure what drivers the printer are using as it's a work printer. The background colours option is enabled.
    – Jonathon Chambers
    Apr 27, 2018 at 9:24
  • I'd recommend you try using the Microsoft Print to PDF driver, or some other "standard", well known driver to see if that produces a different result to help isolate the issue as being one of your code vs the printer driver. Lightning pages were originally not meant to be printed because of all the active content (difficult to freeze all the javascript that's always running in the background in the browser) which is why it can't be done server side.
    – crmprogdev
    Apr 27, 2018 at 14:22

1 Answer 1

Reset to default
0

I just used your CSS:

.THIS {
    -webkit-print-color-adjust: exact !important;
}
Just to see what the outcome was and it seems to work fine! I didn't embed mine within a VF page, I just used the App itself and it looks good to me. I am going to use a standalone LC to reference the Lightning Apps that I am building (need 3 Lightning Reports), so I can open in new tabs and not hit issues!

******* EDIT!

After more testing I truly realised it was due to the Static Resource which I had forgotten I had included -_- Use the following in your stylesheet:

* {
    -webkit-print-color-adjust: exact !important;
}

And this in your Component:

<ltng:require styles="{! $Resource.PrintCSS }" />

This seems to be the only way to actually get this to work, from what I gather when you are using the Style in the component, it only applies it to the component specifically, not to the surrounding area + all of the printable page.

So the only way to really hit ALL of the page is to use a Static Resource and to use the CSS universal selector to apply it to everything!

I also moved my printable page into a Lightning Application so it strips out all additional nonsense, things like the URL's etc... are gone :)

Improve this answer
2
  • I'm still unable to get this working which os are you using? I'm beginning to wonder if it is a possibility it is an issue with using a mac.
    – Jonathon Chambers
    Apr 27, 2018 at 9:38
  • It won't be OS based, try adding a Static Resource as a Stylesheet with a * wildcard in it... I'll update the comment above with the CSS :)
    – Tim
    Apr 27, 2018 at 13:58

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .