vue-print-nb 打印相关问题

一、背景与解决方案

        1、ElementUI表格打印通病，均面临边框丢失、宽度超出问题：相关解决代码有注释；

        2、大多数情况下不会打印页眉页脚的日期、网址、未配置popTitle显示的undefined：相关解决代码有注释；

        3、打印预览页面不显示背景色：相关解决代码有注释；

        4、客户希望打印预览页面显示登录用户信息水印，前端页面不显示水印：使用vue2-water-marker组件，并根据用户操作控制水印组件显示变量；

        5、打印预览页面表头单元格与表体单元格右边框错位：隐藏表头，将表头作为表体第一行数据，并将样式与表头样式统一；表头只有一层且只有一个分组，所以将组名直接写为html元素，放于表格上方，并将样式与表头样式统一。

二、代码示例

<template><div><el-button type="primary" size="mini" icon="el-icon-printer" v-print="printConfig" @click="handlePrint">打印</el-button><div id="printContent"><!-- 打印页面水印，行内样式是为了解决打印页面不显示背景色的问题 --><!-- text: 水印内容，根据需求设置，opacity: 水印内容透明度，0~1之间，越大越清晰 --><vue2-water-marker v-if="showWaterMask" text="打印水印" :opacity="0.8" :zIndex="9999" style="-webkit-print-color-adjust: exact"></vue2-water-marker><div class="table-title">分组表头</div><el-table :data="dataSource" :row-style="rowStyle" size="mini" :show-header="false" border style="width: 100%;"><el-table-columnprop="index"label="序号"algin="center"width="70"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="sex"label="性别"width="180"></el-table-column><el-table-columnprop="height"label="身高"width="180"></el-table-column></el-table></div></div>
</template>
<script>
import print from 'vue-print-nb'export default {directives: {print   },data () {return {showWaterMask: false,printConfig: {id: 'printContent',closeCallback: () => {this.showWaterMask = false; //关闭时不显示水印}},dataSource: [{index: '序号',name: '姓名',sex: '性别',height: '身高'},{index: '1',name: '张三',sex: '男',height: 180},{index: '2',name: '李四',sex: '女',height: 160}]}},methods: {rowStyle ({rowIndex}) { //将表体数据第一行显示样式调整为与表头样式一致return rowIndex===0?{backgroundColor: '#F5F7FA',fontWeight: 'bold',color: '#909399',webkitPrintColorAdjust: 'exact' //解决打印页面“表头”不显示背景色的问题}:{};},handlePrint () {if(this.userName) {this.showWaterMask = true;}}}
}
</script>
<style scoped lang="less">
#printContent>.table-title {padding: 10px 0;background-color: #F5F7FA;border: 1px solid #CCC;border-bottom: none;font-size: 12px;font-weight: bold;vertical-align: middle;text-align: center;color: #909399;
}
</style>
<!-- 打印预览页面样式 -->
<style scoped media="print" lang="less">
@page {size: auto;margin: 3mm;
}
@media print {html {margin: 0px;height: auto;background-color: #FFF;}body {border: 1px solid #FFF;margin: 10mm 15mm 10mm 15mm;} //以上代码解决打印页面页眉页脚显示日期、网址、undefined问题#printContent>.table-title {width: calc(100% - 2px);border-bottom: 1px solid #CCC;-webkit-print-color-adjust: exact; //解决打印页面分组表头不显示背景色的问题}// 解决打印页面表格宽度超出预览区域问题/deep/ table {table-layout: auto !important;}/deep/ #printContent table {table-layout: fixed !important;}/deep/ .el-table__body-wrapper .el-table__body {width: 100% !important;border-right: 1px solid #CCC !important; //解决打印页面表格右边框不显示的问题}
}
</style>

二、涉及问题