vue3后台管理实现局部打印功能

最近在做一个后台管理系统，有个模块需要用到打印功能，想着直接使用浏览器自带的打印功能 ，也就是 window.print()，但是因为功能有局限性，会把整张网页都打印出来，而且我还需要保留原有的样式。所以这里使用到了 print-js这个插件。

下载 print-js

npm i print-js

引入此模块

import printJS from 'print-js'

要打印的页面的局部数据

<el-button color="#6b8fe2" plain size="small" @click="onPrint">打印</el-button >
<div ref="printContent" id="printContent">
    //我这里的数据是表格数据，内容是想要打印的内容，看大家的情况编辑，从这里开始
  <h3 class="word-caption">{
  
  { ltableData.caption }}</h3>
  <span class="table-date" style="fontsize: 16px; lineheight: 40px">年 月 日</span>
  <table border="1px" class="word-table" style="textalign: center">
    <tr>
      <td class="word-td">{
  
  { ltableData.tr1td1 }}</td>
      <td colspan="2" class="word-td1"></td>
      <td class="word-td">{
  
  { ltableData.tr1td2 }}</td>
      <td colspan="2" class="word-td1"></td>
      <td rowspan="4">照片