基于vue-print-nb插件实现前端打印功能

今天开发一个mes系统的生产工单任务详情打印功能，顺便记录一下过程

前端环境：Vue2

打印插件：vue-print-nb

Node版本：v16.20.2

第一步、安装依赖

npm install vue-print-nb

第二步、引入插件

/**
* main.js
/
import Vue from 'vue'
import Print from 'vue-print-nb'
Vue.use(Print)

第三步、代码编写

打印参数说明

id: "printDomId", // 需要打印的容器ID

extraCss: "", //  打印时引入一个css文件

popTitle: " ", // 打印的页眉标题，默认浏览器标题 空字符串时显示undefined 使用html语言

extraHead: "", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分隔

preview: "", // 是否打开预览功能

previewTitle: "", // 打印预览的标题（开启预览模式后出现）,

previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）

zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）

previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback（开启预览模式调用）

previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）

beforeOpenCallback() {}, // 开启打印前的回调事件

openCallback() {}, // 调用打印之后的回调事件

closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）

完整代码

<template>
  <div>
    <el-card id="printDom">
    	<el-button id="printBtn" v-print="printProps" style="margin-bottom: 10px">打印</el-button>
      <!--  打印内容    -->
      <h2 style="color: red">工单数：{{ data.length }}，工单数量：{{ data.reduce((sum, data) => sum + data.workOrderQuantity, 0) }}，已生产数量：{{ data.reduce((sum, data) => sum + data.producedQuantity, 0) }}，待生产数量：{{ data.reduce((sum, data) => sum + data.pendingQuantity, 0) }}</h2>
      <el-table border :data="data">
        <el-table-column label="序号" type="index" width="50"/>
        <el-table-column label="工单编号" prop="workOrderId"/>
        <el-table-column label="工单名称" prop="workOrderName"/>
        <el-table-column label="工单数量" prop="workOrderQuantity"/>
        <el-table-column label="已生产数量" prop="producedQuantity"/>
        <el-table-column label="待生产数量" prop="pendingQuantity"/>
        <el-table-column label="生产进度" prop="productionProgress"/>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          "workOrderId": "WO001",
          "workOrderName": "产品A生产线任务",
          "workOrderQuantity": 500,
          "producedQuantity": 80,
          "pendingQuantity": 420,
          "productionProgress": "16%"
        },
        {
          "workOrderId": "WO002",
          "workOrderName": "产品B定制订单",
          "workOrderQuantity": 90,
          "producedQuantity": 30,
          "pendingQuantity": 60,
          "productionProgress": "33%"
        },
        {
          "workOrderId": "WO003",
          "workOrderName": "产品C季度生产",
          "workOrderQuantity": 1200,
          "producedQuantity": 600,
          "pendingQuantity": 600,
          "productionProgress": "50%"
        },
        {
          "workOrderId": "WO004",
          "workOrderName": "产品D紧急补货",
          "workOrderQuantity": 300,
          "producedQuantity": 200,
          "pendingQuantity": 100,
          "productionProgress": "67%"
        },
        {
          "workOrderId": "WO005",
          "workOrderName": "产品E出口订单",
          "workOrderQuantity": 750,
          "producedQuantity": 0,
          "pendingQuantity": 750,
          "productionProgress": "0%"
        }
      ],
      printProps: {
        id: 'printDom',
        popTitle: '工单数据',
        preview: true,
        previewTitle: '生产工单打印预览'
      }
    }
  }
}
</script>
<style scoped lang="scss">
@media print{
  .stats_head { // 打印状态下隐藏工单统计
    display: none;
  }
  @page { // 设置页码样式
    margin: 10px;
  }
  #printBtn { // 打印时隐藏打印按钮
    display:none;
  }
}
</style>

运行结果

打开预览模式在点击打印之前会先进入预览模式

点击打印按钮

将表单拆分为多页

修改一下代码，for循环三个表格，外层div样式不加 'page-break-after:always' 的打印效果

<template>
  <div>
    <el-card id="printDom">
    	<el-button id="printBtn" v-print="printProps" style="margin-bottom: 10px">打印</el-button>
      <!--  打印内容    -->
      <div v-for="i in 3" :key="i">
        <h2 style="color: red">工单数：{{ data.length }}，工单数量：{{ data.reduce((sum, data) => sum + data.workOrderQuantity, 0) }}，已生产数量：{{ data.reduce((sum, data) => sum + data.producedQuantity, 0) }}，待生产数量：{{ data.reduce((sum, data) => sum + data.pendingQuantity, 0) }}</h2>
        <el-table border :data="data">
          <el-table-column label="序号" type="index" width="50"/>
          <el-table-column label="工单编号" prop="workOrderId"/>
          <el-table-column label="工单名称" prop="workOrderName"/>
          <el-table-column label="工单数量" prop="workOrderQuantity"/>
          <el-table-column label="已生产数量" prop="producedQuantity"/>
          <el-table-column label="待生产数量" prop="pendingQuantity"/>
          <el-table-column label="生产进度" prop="productionProgress"/>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

外层div样式加 'page-break-after:always' 的打印效果

<template>
  <div>
    <el-card id="printDom">
    	<el-button id="printBtn" v-print="printProps" style="margin-bottom: 10px">打印</el-button>
      <!--  打印内容    -->
      <div style='page-break-after:always' v-for="i in 3" :key="i">
        <h2 style="color: red">工单数：{{ data.length }}，工单数量：{{ data.reduce((sum, data) => sum + data.workOrderQuantity, 0) }}，已生产数量：{{ data.reduce((sum, data) => sum + data.producedQuantity, 0) }}，待生产数量：{{ data.reduce((sum, data) => sum + data.pendingQuantity, 0) }}</h2>
        <el-table border :data="data">
          <el-table-column label="序号" type="index" width="50"/>
          <el-table-column label="工单编号" prop="workOrderId"/>
          <el-table-column label="工单名称" prop="workOrderName"/>
          <el-table-column label="工单数量" prop="workOrderQuantity"/>
          <el-table-column label="已生产数量" prop="producedQuantity"/>
          <el-table-column label="待生产数量" prop="pendingQuantity"/>
          <el-table-column label="生产进度" prop="productionProgress"/>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

生活中程序猿的真实写照、一款游戏一包烟，一台电脑一下午。一盒泡面一壶水，一顿能管一整天。