Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
590 views
in Technique[技术] by (71.8m points)

vue.js - Printing Page Section using PrintJS on vueJS

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?

question from:https://stackoverflow.com/questions/65885900/printing-page-section-using-printjs-on-vuejs

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...