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.

Answer 1

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

<iframe id="ifmcontentstoprint" style="height: 0px; width: 0px; position: absolute"></iframe> 

The other solution is to use the media selector and on the media="print" styles hide everything you don't want to print.

<style type="text/css" media="print">    .no-print { display: none; } </style> 

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.