一、背景與解決方案

? ? ? ? 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>

二、涉及問題