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.)  😉