0

I have installed printJS on my vue project using npm install print-js --save

Print Preview is now successfully displaying but the problem is that it is printing the whole page together with the side panel and the scroll bars. I have implemented it like this:

<template>
  <b-modal>
     <div id="print-form">
       <table style="border-collapse: collapse; width: 100%" border="1px">
       </table>
        <button onclick="print()" class="btn btn-primary btn-block">Print</button>
     </div>
  </b-modal>
</template>

import * as Printjs from "print-js";
export default {
   method: {
     print() {
       Printjs({
         printable: "print-registration-form", //Id to print content 
         type: "HTML"
      });
    }
  }
}

When I click print, it will print the whole page and not the page section specified by the id. Is there a way I can only print the specific div content?

jdev
  • 31
  • 1
  • 11

2 Answers2

3

Looks like you are using the wrong id. Did you mean to use print-form instead?

       printJS({
         printable: "print-form",
         type: "HTML"
       });
crabbly
  • 5,106
  • 1
  • 23
  • 46
2

I can propose you this solution:

@media print { 
  body * { 
  visibility: hidden; 
  } 
  #targetDiv, #targetDiv * { 
  visibility: visible; border: none; 
  }
} 
 <!DOCTYPE html>
 <html> 
 <body> 
  <h2>The window.print() Method</h2> 
  <div>
    <p>Click the button to print the current page.</p> 
  </div>
  
  <div id="targetDiv">
    <p>Lorem ipsum kjng kq fev lnb fesl</p>   
  </div>
  <button onclick="window.print()">Print this page</button> 
 </body> 
 </html>
zerbene
  • 1,249
  • 2
  • 7
  • 21
  • Tried using your solution. It eliminated the scrollbars but it still displays the left panel and the other sections. It should be the table content alone. But thanks to your suggestion! – jdev Jan 25 '21 at 13:52