How to print React component on click of a button

Question

How can I print only one component on click of a button      I know this solution      window frames  print frame   window focus     window frames  print frame   window print         print frame   remove         But React doesn t want to work with a frame     Any solutions  Thank you

User · Answer

On 6 19 2017 This worked perfect for me     import React    Component   from  react   class PrintThisComponent extends Component     render         return          lt div gt           lt button onClick       gt  window print    gt PRINT lt  button gt           lt p gt Click above button opens print preview with these words on page lt  p gt         lt  div gt               export default PrintThisComponent

User · Answer

There is kind of two solutions on the client  One is with frames like you posted  You can use an iframe though   var content   document getElementById  divcontents    var pri   document getElementById  ifmcontentstoprint   contentWindow  pri document open    pri document write content innerHTML   pri document close    pri focus    pri print      This expects this html to exist    lt iframe id  ifmcontentstoprint  style  height  0px  width  0px  position  absolute  gt  lt  iframe gt    The other solution is to use the media selector and on the media  print  styles hide everything you don t want to print    lt style type  text css  media  print  gt      no-print   display  none     lt  style gt    Last way requires some work on the server  You can send all the HTML CSS to the server and use one of many components to generate a printable document like PDF  I ve tried setups doing this with PhantomJs

User · Answer

If you re looking to print specific data that you already have access to  whether it s from a Store  AJAX  or available elsewhere  you can leverage my library react-print    https   github com captray react-print  It makes creating print templates much easier  assuming you already have a dependency on react   You just need to tag your HTML appropriately    This ID should be added higher up in your actual DOM tree to exclude everything except the  print mount  below    lt div id  react-no-print  gt     This is where your react-print component will mount and wrap your template that you create    lt div id  print-mount  gt  lt  div gt    An example looks something like this    var PrintTemplate   require  react-print    var ReactDOM   require  react-dom    var React   require  react     var MyTemplate   React createClass       render             return                lt PrintTemplate gt                   lt p gt Your custom lt  p gt                   lt span gt print stuff goes lt  span gt                   lt h1 gt Here lt  h1 gt               lt  PrintTemplate gt                        ReactDOM render  lt MyTemplate  gt   document getElementById  print-mount       It s worth noting that you can create new or utilize existing child components inside of your template  and everything should render fine for printing

User · Answer

Just sharing what worked in my case as someone else might find it useful  I have a modal and just wanted to print the body of the modal which could be several pages on paper    Other solutions I tried just printed one page and only what was on screen  Emil s accepted solution worked for me   https   stackoverflow com a 30137174 3123109  This is what the component ended up looking like  It prints everything in the body of the modal   import React    Component   from  react   import       Button      Modal      ModalBody      ModalHeader   from  reactstrap    export default class TestPrint extends Component      constructor props            super props           this state                 modal  false              data                     test    test    test    test    test    test                     test    test    test    test    test    test                     test    test    test    test    test    test                    test    test    test    test    test    test                    test    test    test    test    test    test                    test    test    test    test    test    test                    test    test    test    test    test    test                    test    test    test    test    test    test                                              this toggle   this toggle bind this           this print   this print bind this              print             var content   document getElementById  printarea            var pri   document getElementById  ifmcontentstoprint   contentWindow          pri document open            pri document write content innerHTML           pri document close            pri focus            pri print               renderContent             var i   0          return this state data map  d    gt                return   lt p key  d   i    gt  i  -  d  lt  p gt                          toggle             this setState               modal   this state modal                       render             return                lt div gt                   lt Button                      style                                                          position    fixed                                top    50                                 left    50                                 transform    translate -50   -50                                                                         onClick  this toggle                   gt                      Test Modal and Print                  lt  Button gt                            lt Modal                      size  lg                       isOpen  this state modal                       toggle  this toggle                       className  results-modal                   gt                         lt ModalHeader toggle  this toggle  gt                          Test Printing                      lt  ModalHeader gt                       lt iframe id  ifmcontentstoprint  style                            height   0px                           width   0px                           position   absolute                         gt  lt  iframe gt                             lt Button onClick  this print  gt Print lt  Button gt                       lt ModalBody id  printarea  gt                                         this renderContent                         lt  ModalBody gt                   lt  Modal gt               lt  div gt                      Note  However  I am having difficulty getting styles to be reflected in the iframe

User · Answer

I was looking for a simple package that would do this very same task and did not find anything so I created https   github com gregnb react-to-print  You can use it like so     lt ReactToPrint    trigger       gt   lt a href     gt Print this out  lt  a gt      content       gt  this componentRef     gt    lt ComponentToPrint ref  el   gt   this componentRef   el     gt

User · Answer

You ll have to style your printout with  media print    in the CSS but the simple code is   export default class Component extends Component        print            window print              render               lt span className  print                onClick  this print  gt      PRINT      lt  span gt            Hope that s helpful

User · Answer

First want to credit  emil-ingerslev for an awesome answer  I tested it and it worked perfectly  There were two things however I wanted to improve     I didn t like having to already have  lt iframe id  ifmcontentstoprint  style  height  0px  width  0px  position  absolute  gt  lt  iframe gt  already in the dom tree  I wanted to create a way to make it reusable    I hope this makes others happy and saves a few minutes of life  Now go take those extra minutes and do something nice for someone   function printPartOfPage elementId  uniqueIframeId       const content   document getElementById elementId      let pri     if  document getElementById uniqueIframeId             pri   document getElementById uniqueIframeId  contentWindow       else           const iframe   document createElement  iframe           iframe setAttribute  title   uniqueIframeId          iframe setAttribute  id   uniqueIframeId          iframe setAttribute  style    height  0px  width  0px  position  absolute            document body appendChild iframe          pri   iframe contentWindow           pri document open       pri document write content innerHTML      pri document close       pri focus       pri print       EDIT 2019-7-23  After using this more  this does have the downside that it doesn t perfectly render react components  This worked for me when the styling was inline but not when handled by styled-components or some other situations  If I come up with a foolproof method I will update

User · Answer

The solution provided by Emil Ingerslev is working fine  but CSS is not applied to the output  Here I found a good solution given by Andrewlimaza  It prints the contents of a given div  as it uses the window object s print method  the CSS is not lost  And there is no need for an extra iframe also   var printContents   document getElementById  divcontents   innerHTML  var originalContents   document body innerHTML  document body innerHTML   printContents  window print    document body innerHTML   originalContents    Update 1  There is unusual behavior  in chrome firefox opera edge  the print or other buttons stopped working after the execution of this code   Update 2  The solution given is there on the above link in comments    printme   display  none    media print         no-printme    display  none        printme    display  block       lt h1 class    no-printme  gt  do not print this  lt  h1 gt       lt div class  printme  gt    Print this only   lt  div gt       lt button onclick  window print    gt Print only the above div lt  button gt

[javascript] How to print React component on click of a button?

Examples related to javascript

Examples related to reactjs

Examples related to higher-order-components