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-column
                    prop="index"
                    label="序号"
                    algin="center"
                    width="70">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="sex"
                    label="性别"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="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>

二、涉及问题