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

Ajith Jojo Joseph

Self taught, dedicated young entrepreneur with many licensed products under his sleeve. Passionate about technology, business and excellence in general.

Share with your friends:

Leave a Reply

Your email address will not be published. Required fields are marked *

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