How to print a Lightning component?

Question

We're looking for getting a Lightning component contents printed out. Below is the approach I already have.

using CSS to show hide contents for print:

@media print {
    .THIS.divToPrint {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 18px;
    }

    .THIS.hideInPrint{
        display: none;
    }
}

and using Javascript to perform Print:

performPrint: function(component, event, helper){
  window.print();  
},

Above is working for certain extent. But it's having below issues.

• if the content overflows, it does not print to multiple pages, I get only one page like a screenshot.
• It prints words like Aura on top left corner, and url on top right corner.

Any suggestion to do this better, fixing these issues, and without creating a separate VF page for it. Appreciate any help.

Thanks.

Answer 1

It's only a slight improvement, but I create a Lightning app for this purpose e.g.

Component:

<aura:application extends="force:slds">

    <aura:attribute name="recordId" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <div>
        <div>
            <lightning:button label="Print" onclick="{!c.print}" class="print-hide" />
            <c:FormFromMetadata printView="true" formVersionId="{!v.recordId}" />
        </div>
    </div>

</aura:application>

Controller:

({
    print : function(component, event, helper) {
        window.print();
    }
})

Then, the component I want to print can have print-specific CSS classes, and also make use of printView (e.g. for tabbed stuff, it stacks the tabs one after the other). By being in a standalone app, it strips off the Lightning interface and the URL.

Answer 2

You could use https://gist.github.com/danic85/d56e11650783e7fd6f635e962da3d79b. I had to print data from table based on checkbox click. So I created two components with event and  passed the parameters. I put them in the same page.  In my case using this I was able onclick to hide other components and leave only the printable one and playing with window.setTimeout to add and remove  hide and show classes. So when the print preview is closed it hides the printable component and shows other stuff. 

It is too long and time consuming but it works. 

Hope this help. 

Answer 3

Below issues can be fixed

• if the content overflows, it does not print to multiple pages, I get only one page like a screenshot.
• It prints words like Aura on top left corner, and url on top right corner.

by adding below code in .css

if your issue fix, please select as best answer.

Answer 4

Add class "slds-no-print" to all div and components which you don't want to print.