0

我已经使用安装printJS在我的 vue 项目上npm install print-js --save

打印预览现在已成功显示，但问题是它正在打印整个页面以及侧面板和滚动条。我已经这样实现了：

<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"
      });
    }
  }
}

当我单击打印时，它将打印整个页面，而不是由id. 有没有办法只能打印特定div内容？

4

2 回答 2

2

看起来您使用了错误的 ID。你的意思是print-form改用吗？

       printJS({
         printable: "print-form",
         type: "HTML"
       });
于 2021-01-27T20:16:42.293 回答
0

我可以向你推荐这个解决方案：

@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>

于 2021-01-25T13:43:25.877 回答