Want to print React component on click of a button? There is kind of two solutions on the client. One is with frames like you posted. You can use an iframe though:
1 2 3 4 5 6 7 | 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
1 | <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.
1 2 3 | <style type="text/css" media="print"> .no-print { display: none; } </style> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
