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">照片</td>
    </tr>
    <tr>
       <td class="word-td">{{ ltableData.tr2td1 }}</td>
       <td class="word-td2"></td>
       <td class="word-td">{{ ltableData.tr2td2 }}</td>
       <td class="word-td2"></td>
       <td class="word-td">{{ ltableData.tr2td3 }}</td>
       <td class="word-td2"></td>
     </tr>
     <tr>
       <td class="word-td"> {{ ltableData.tr3td1 }}</td>
       <td class="word-td2"></td>
       <td class="word-td">{{ ltableData.tr3td2 }}</td>
       <td class="word-td2"></td>
       <td class="word-td">{{ ltableData.tr3td3 }}</td>
       <td class="word-td2"></td>
     </tr>
     <tr>
        <td class="word-td">{{ ltableData.tr4td1 }}</td>
        <td colspan="2"></td>
        <td class="word-td">{{ ltableData.tr4td2 }}</td>
        <td colspan="2"></td>
     </tr>
     <tr>
        <td class="word-td">{{ ltableData.tr5td1 }}</td>
        <td></td>
        <td class="word-td">{{ ltableData.tr5td2 }}</td>
        <td></td>
        <td class="word-td">{{ ltableData.tr5td3 }}</td>
        <td colspan="2">√是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;否</td>
      </tr>
      <tr>
        <td class="word-td">{{ ltableData.tr6 }}</td>
        <td colspan="7" style="height: 100px"></td>
      </tr>
      <tr>
       	<td class="word-td">{{ ltableData.tr7 }}</td>
        <td colspan="7" style="height: 120px"></td>
      </tr>
      <tr>
        <td class="word-td">{{ ltableData.tr8 }}</td>
        <td colspan="7" style="height: 100px"></td>
      </tr>
      <tr>
        <td class="word-td">{{ ltableData.tr9 }}</td>
        <td colspan="7" style="height: 80px"></td>
      </tr>
  </table>
  //到这里结束
</div>

js代码

我这里的js用的是vue3组合式setup语法糖的写法

<script setup>
import { onMounted,reactive,ref } from "vue";
import printJS from "print-js";

// 打印内容与div标签绑定
const printContent = ref(null);
const ltableData = reactive({
  caption: "xxx社团报名表",
  tr1td1: "院系",
  tr1td2: "专业",
  tr2td1: "姓名",
  tr2td2: "性别",
  tr2td3: "籍贯",
  tr3td1: "政治面貌",
  tr3td2: "民族",
  tr3td3: "身高/体重",
  tr4td1: "联系方式",
  tr4td2: "电子邮箱",
  tr5td1: "第一意愿",
  tr5td2: "第二意愿",
  tr5td3: "是否接受调剂",
  tr6: "兴趣爱好/个人特长",
  tr7: "个人经历(参与过的社团经历、社会实践等)",
  tr8: "曾获得的奖项",
  tr9: "个人优势",
});
//打印按钮
const onPrint = () => {
  //获取元素
  const node = printContent.value;
  printJS({
    printable: node,
    type: "html",
    targetStyles: ["*"], //添加样式
  });
};
</script>

样式

<style lang="scss" scoped>
.newManager {
  margin-top: 15px;
  height: 100%;
  width: 100%;
  display: flex;
  .leftMain {
    position: relative;
    .card-title {
      margin-top: 10px;
    }
  }
  // overflow: auto;
  .rightMain {
    margin-left: 25px;
    margin-right: 15px;
    flex: 1;
    width: 100%;
    overflow: auto;
    .word-caption {
      font-size: 25px;
      text-align: center;
    }
    .word-table {
      width: 100%;
      text-align: center;
      margin-bottom: 200px;

      .word-td {
        width: 100px;
        height: 38px;
      }
      .word-td1 {
        width: 135px;
      }
      .word-td2 {
        width: 90px;
      }
    }
    .word-header {
      margin-bottom: 30px;
      display: flex;
      // float: right;
      flex-direction: row-reverse;
      // justify-content: space-between;
    }
  }
}

实现效果