2

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.

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.

| improve this answer | |
  • Hi @Aidan Thanks for the reply. I'm still looking for getting 2 above issues sorted. The other option available is creating a visualforce page with the same layout and renderas="pdf" which is double work in terms of maintenance. – Pasan Eeriyagama Nov 1 '17 at 0:40
  • My solution does solve both those problems. No URL at the top of the page, and it can produce multiple pages. – Aidan Nov 1 '17 at 12:54
1

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. 

| improve this answer | |
0

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

enter image description here

if your issue fix, please select as best answer.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.