Print selected part from body

Question

I want to print the body which only includes the selected part

on click of this method the page alignment changes

//app

<div class="header">
    <ul>
        <li>Home</li>
        <li>Page</li>
        <li>Contact</li>
    </ul>
</div>
<div id="payment-receipt">
    <div>
        <p>Price$24.78</p>
        <p>Product Status About to reach </p>
    </div>
</div>

//js

 printDiv() {
     //Get the HTML of div
     var divElements = document.getElementById('payment-receipt').innerHTML;
     //Get the HTML of whole page
     var oldPage = document.body.innerHTML;
     //Reset the page's HTML with div's HTML only
     document.body.innerHTML = "<html><head><title></title></head><body>" + divElements + "</body>";
     //Print Page
     window.print();
     //Restore orignal HTML
     document.body.innerHTML = oldPage;  
}

The alignments should stay same before the click and after the click of method

I think it would be better to solve this by using css styling for print — Mr Zach, Jan 14 '19 at 08:46
check this https://stackoverflow.com/questions/468881/print-div-id-printarea-div-only — holydragon, Jan 14 '19 at 08:46

score 0 · Answer 1 · answered Jan 14 '19 at 08:48

You can do so by using print stylesheet

@media print{
  /* hide this element on media print */
  .header{
    display:none;
  }
}

<div class="header">
  <ul>
    <li>Home</li>
    <li>Page</li>
    <li>Contact</li>
  </ul>
</div>
<div id="payment-receipt">
   <div>
      <p>Price$24.78</p>
      <p>Product Status About to reach </p>
   </div>
</div>

Younes Zaidi · Answer 2 · 2019-01-14T09:18:51.247

<div class="header">
  <ul>
    <li>Home</li>
    <li>Page</li>
    <li>Contact</li>
  </ul>
</div>
<div id="payment-receipt" name='clickf'>
   <div>
      <p>Price$24.78</p>
      <p>Product Status About to reach </p>
   </div>
</div>

Print selected part using javascript no jquery

var el = document.getElementById('payment-receipt');
if(el){
  el.addEventListener('click', print_div, false);
}

function print_div(){
    var content = document.getElementById('payment-receipt').innerHTML;
    var mywindow = window.open();
    mywindow.document.write('<html><head><title>Print</title></head><body >'+content+'</body></html>');
    mywindow.print();
        document.body.innerHTML =content;  
         mywindow.close();
    return true;
}

working demo

score 0 · Answer 3 · answered Jan 14 '19 at 09:23

Based on Younes Zaidi answer with a small change :

Working Demo

var el = document.getElementById('payment-receipt');
if(el){
  el.addEventListener('click', print_div, false);
}

function print_div(){
    var content = document.getElementById('payment-receipt').innerHTML;
    var mywindow = window.open();
    mywindow.document.write('<html><head><title>Print</title></head><body >'+ window.getSelection() +'</body></html>');
    mywindow.print();
  document.body.innerHTML =content;  
    return true;
}

<div class="header">
  <ul>
    <li>Home</li>
    <li>Page</li>
    <li>Contact</li>
  </ul>
</div>
<div id="payment-receipt" name='clickf'>
   <div>
      <p>Price$24.78</p>
      <p>Product Status About to reach </p>
   </div>
</div>


<textarea id="text"></textarea>

Nishant Singh · Answer 4 · 2019-01-14T09:57:30.790

I faced the same problem - There was a form containing user data. I had to print that form but also prevent print unnecessary data or say only print a specific portion of the page that contains data

How i solved this

1. For Simple Cases Hide all the elements that you don't need and call the window.print() on the remaining part

printForm(){

    document.getElementById('element1').style.display='None'
    document.getElementById('element2').style.display='None'
    document.getElementById('element2').style.display='None'
    window.print()
}

2. For Complex Cases Now there might be a problem in complex dom, in my case it was simple, now let's see how to solve the same in complex dom structure

HTML

<body>
  <div id="content">

   <!-- Content that has to be printed -->   

  </div>

  <div id="print-content">

  <!-- Will be used for printing purpose -->

  </div>
</body>

Javascript

let contentEl = document.getElementById('content')
let printEl = document.getElementById('print-content')

printEl.appencChild(contentEl.innerHtml)
contentEl.style.display = "None"

window.print()

Print selected part from body

4 Answers4