Print a div in React js or HTML – a Simple JavaScript function
Do you know how to print a div in react js or HTML?
Before I tell you how. I wanna tell you will I am creating this article. A few days ago i worked on a CRM project that has an invoice view option. my client needed an option to print the invoice.
I searched online and tried different methods. it was working with HTML but not with react js. so I modified the code and worked perfectly on reactjs. So I am sharing with you all the code also I am keeping that here as a document.
Create your page component and add this function into it
const Print = () =>{ //console.log('print'); let printContents = document.getElementById('printablediv').innerHTML; let originalContents = document.body.innerHTML; document.body.innerHTML = printContents; window.print(); document.body.innerHTML = originalContents; }
Now we can create a printable div on the page.
<div id='printablediv'> Print me </div>
Now create a button to call the function
<button type="button" onClick={Print} > Print div</button>
yeah, that’s all .. you can generate a print from the specific div.
all the digital marketing experts telling me to write blog with more than 500 words. but my topics are simple so I don’t have too many words .. you just grab the code copy and paste .. (like all programmers do.) 😉
Post Your Questions on our forum
Post a question on Forum
Share with your friends:
Print a div in React js or HTML – a Simple JavaScript function
Do you know how to print a div in react js or HTML? Before I tell you how. I wanna […]
1 June, 2022
TinyMCE Rich text editor with server side Image upload using PHP
I used different rich text editors but the main problem is image upload.. Every time i try to upload an […]
31 May, 2022
HTML to React JS Basic Functions
Hey, this blog post was specifically written for the viewers of my youtube video. please check the video to get […]
24 February, 2022
HTML Form to Email Using JavaScript and SMTP server 🚀
Hello Everyone, 🙋♂️ In this tutorial, we are going to look at how to send emails from HTML Form to […]
22 September, 2021
Digital Marketing Toolkit
Get Free Access to Digital Marketing Toolkit. You can use all our tools without any limits
Get Free Access Now
Leave a Reply