手摸手系列之前端手撸CSS完成打印界面预览功能

需求

最近在做集团前后端分离项目-悦通关平台的付款申请审批工作流功能，遇到一个需求，需要在办理历史的详情页打印业务信息，界面如图2：

预览界面不是很复杂，只是一个二维表格加个印章，印章内容随流程审批自动变换为已申请、审批中、已完成等。

思路

以前的导出下载、打印预览等是通过后端来处理的，zbus直接生成流返前端，或直接生成文件返前端下载地址通过nginx来下载，此方式针对的文件都比较大。上面这个需求比较简单文件也比较小，完全可以不用浪费后端资源，可以直接通过前端Vue的print插件来处理，印章可以通过CSS直接画出来就行了。说干就干！

步骤

前端用的jeecg框架，有封装好的print插件可供使用。

1. 前端package.json引入依赖

   "dependencies": {
       ...
       "vue-print-nb-jeecg": "^1.0.9",
       ...
     },
   

2. main.js中导入并使用Print插件

   // 引入依赖
   import Print from 'vue-print-nb-jeecg'
   // 使用插件
   Vue.use(Print)
   
   

3. 打印按钮加v-print指令，其中#printMe指向打印区域

   <a-button type='primary' v-print="'#printMe'" @click='printFKSQ' style='display: inline-block;'>
          打印
   </a-button>
   

4. 定义一个打印区域div

    <div v-if="this.printShow" id="printMe" style="position:relative; z-index:1;">
       <div v-if="this.accountPutPayment.putStatus === '1'" class="numberCircle" style="position:absolute; z-index: 10;margin-left: 550px;float: right;">已申请</div>
       <div v-if="this.accountPutPayment.putStatus === '2'" class="numberCircle" style="position:absolute; z-index: 10;margin-left: 550px;float: right;">审批中</div>
       <div v-if="this.accountPutPayment.putStatus === '3'" class="numberCircle" style="position:absolute; z-index: 10;margin-left: 550px;float: right;">已完成</div>
       <a-row :gutter="24" type="flex" justify="center">
           <a-col>
               <h2>付款申请</h2><br>
           </a-col>
       </a-row>
       <a-row :gutter="24" type="flex" justify="center" style="margin-top: 0px;height: 50px">
           <a-col :span="6" style="text-align: right;border: #888888 1px solid;padding-top: 12px">申请流水号</a-col>
           <a-col :span="12" style="border: #888888 1px solid;padding-top: 12px">{{ this.accountPutPayment.id }}</a-col>
       </a-row>
       <a-row :gutter="24" type="flex" justify="center" style="margin-top: 0px;height: 50px">
           <a-col :span="6" style="text-align: right;border: #888888 1px solid;padding-top: 12px">申请人</a-col>
           <a-col :span="12" style="border: #888888 1px solid;padding-top: 12px">{{ this.accountPutPayment.putMan }}</a-col>
       </a-row>
       <a-row :gutter="24" type="flex" justify="center" style="margin-top: 0px;height: 50px">
           <a-col :span="6" style="text-align: right;border: #888888 1px solid;padding-top: 12px">申请人部门</a-col>
           <a-col :span="12" style="border: #888888 1px solid;padding-top: 12px">{{ this.accountPutPayment.putDept }}</a-col>
       </a-row>
       <a-row :gutter="24" type="flex" justify="center" style="margin-top: 0px;height: 50px">
           <a-col :span="6" style="text-align: right;border: #888888 1px solid;padding-top: 12px">付款原因</a-col>
           <a-col :span="12" style="border: #888888 1px solid;padding-top: 12px">{{ this.accountPutPayment.payCause }}</a-col>
       </a-row>
       <a-row :gutter="24" type="flex" justify="center" style="margin-top: 0px;height: 50px">
           <a-col :span="6" style="text-align: right;border: #888888 1px solid;padding-top: 12px">是否收款</a-col>
           <a-col :span="12" style="border: #888888 1px solid;padding-top: 12px">{{ this.accountPutPayment.isPut != null && this.accountPutPayment.isPut === true ? '是' : '否'}}</a-col>
       </a-row>
       <a-row :gutter="24" type="flex" justify="center" style="margin-top: 0px;height: 50px">
           <a-col :span="6" style="text-align: right;border: #888888 1px solid;padding-top: 12px">是否代垫</a-col>
           <a-col :span="12" style="border: #888888 1px solid;padding-top: 12px">{{ this.accountPutPayment.isDd != null && this.accountPutPayment.isDd === true ? '是' : '否'}}</a-col>
       </a-row>
       <a-row :gutter="24" type="flex" justify="center" style="margin-top: 0px;height: 50px">
           <a-col :span="6" style="text-align: right;border: #888888 1px solid;padding-top: 12px">付款金额</a-col>
           <a-col :span="12" style="border: #888888 1px solid;padding-top: 12px">{{ this.accountPutPayment.amount}}</a-col>
       </a-row>
       <a-row :gutter="24" type="flex" justify="center" style="margin-top: 0px;height: 50px">
           <a-col :span="6" style="text-align: right;border: #888888 1px solid;padding-top: 12px">币种</a-col>
           <a-col :span="12" style="border: #888888 1px solid;padding-top: 12px">{{ this.accountPutPayment.curr}}</a-col>
       </a-row>
       <a-row :gutter="24" type="flex" justify="center" style="margin-top: 0px;height: 50px">
           <a-col :span="6" style="text-align: right;border: #888888 1px solid;padding-top: 12px">操作日期</a-col>
           <a-col :span="12" style="border: #888888 1px solid;padding-top: 12px">{{ this.accountPutPayment.createDate}}</a-col>
       </a-row>
       <a-row :gutter="24" type="flex" justify="center" style="margin-top: 0px;height: 50px">
           <a-col :span="6" style="text-align: right;border: #888888 1px solid;padding-top: 12px">收款单位</a-col>
           <a-col :span="12" style="border: #888888 1px solid;padding-top: 12px">{{ this.accountPutPayment.putName}}</a-col>
       </a-row>
       <a-row :gutter="24" type="flex" justify="center" style="margin-top: 0px;height: 50px">
           <a-col :span="6" style="text-align: right;border: #888888 1px solid;padding-top: 12px">收款银行</a-col>
           <a-col :span="12" style="border: #888888 1px solid;padding-top: 12px">{{ this.accountPutPayment.putBank}}</a-col>
       </a-row>
       <a-row :gutter="24" type="flex" justify="center" style="margin-top: 0px;height: 50px">
           <a-col :span="6" style="text-align: right;border: #888888 1px solid;padding-top: 12px">收款账号</a-col>
           <a-col :span="12" style="border: #888888 1px solid;padding-top: 12px">{{ this.accountPutPayment.putNumber}}</a-col>
       </a-row>
       <a-row :gutter="24" type="flex" justify="center" style="margin-top: 0px;height: 50px">
           <a-col :span="6" style="text-align: right;border: #888888 1px solid;padding-top: 12px">付款单位</a-col>
           <a-col :span="12" style="border: #888888 1px solid;padding-top: 12px">{{ this.accountPutPayment.payName}}</a-col>
       </a-row>
       <a-row :gutter="24" type="flex" justify="center" style="margin-top: 0px;height: 50px">
           <a-col :span="6" style="text-align: right;border: #888888 1px solid;padding-top: 12px">付款方式</a-col>
           <a-col :span="12" style="border: #888888 1px solid;padding-top: 12px">{{ dealType() }}</a-col>
       </a-row>
       <a-row :gutter="24" type="flex" justify="center" style="margin-top: 0px;height: 50px">
           <a-col :span="6" style="text-align: right;border: #888888 1px solid;padding-top: 12px">备注</a-col>
           <a-col :span="12" style="border: #888888 1px solid;padding-top: 12px">{{ this.accountPutPayment.memo}}</a-col>
       </a-row>
   </div>
   

   因为用表格table生成的页面不够美观，所以直接用ant-design-vue的格栅系统来处理。其中印章的样式处理要注意，可以细调弧度、文本的居中偏移等样式：

   <style scoped>
   .numberCircle {
       border-radius: 80%;
       width: 100px;
       height: 100px;
       padding-top: 30px;
       padding-bottom: 22px;
       border: 2px solid #888888;
       color: #666;
       text-align: center;
       font: 22px Arial, sans-serif;
       transform: rotate(-45deg);
   }
   </style>
   

   最终生成的印章：
   

总结

功能挺简单的，代码可以继续优化，如每个row每个col的style可以定义class来统一处理的，此处只是用来演示。

以上