需求

打印Element-UI el-table组件渲染的表格。

总体布局

整体采用居中布局，表格宽度设置为1000px。表格宽度应该根据打印的纸张大小设置，过大会导致表格打印时显示不全，过小则不能充分利用纸张空间。我用A4纸打印设置宽度1000px刚好。

1. 静态页面

  1. <template>
  2.   <div class="print-container">
  3.     <h1 style="text-align: center">员工信息表</h1>
  4.     <el-table
  5.         :data="tableData"
  6.         style="width: 100%"
  7.         border>
  8.       <el-table-column
  9.           prop="date"
  10.           label="日期"
  11.           width="180">
  12.       </el-table-column>
  13.       <el-table-column
  14.           prop="name"
  15.           label="姓名"
  16.           width="180">
  17.       </el-table-column>
  18.       <el-table-column
  19.           prop="gender"
  20.           label="性别"
  21.           width="180">
  22.       </el-table-column>
  23.       <el-table-column
  24.           prop="address"
  25.           label="地址">
  26.       </el-table-column>
  27.       <el-table-column
  28.           prop="phone"
  29.           label="手机">
  30.       </el-table-column>
  31.     </el-table>
  32.     <div class="print-button-container">
  33.       <el-button type="primary" icon="el-icon-printer">打印</el-button>
  34.     </div>
  35.   </div>
  36. </template>
  38. <script>
  39. export default {
  40.   name: 'Print',
  41.   props: {
  42.     msg: String
  43.   },
  44.   data() {
  45.     return {
  46.       tableData: [{
  47.         date: '2016-05-02',
  48.         name: '王小虎',
  49.         gender: '男',
  50.         address: '上海市普陀区金沙江路 1518 弄',
  51.         phone: '19029384851'
  52.       }, {
  53.         date: '2016-05-04',
  54.         name: '王小虎',
  55.         gender: '男',
  56.         address: '上海市普陀区金沙江路 1517 弄',
  57.         phone: '19029384851'
  58.       }, {
  59.         date: '2016-05-01',
  60.         name: '王小虎',
  61.         gender: '男',
  62.         address: '上海市普陀区金沙江路 1519 弄',
  63.         phone: '19029384851'
  64.       }, {
  65.         date: '2016-05-03',
  66.         name: '王小虎',
  67.         gender: '男',
  68.         address: '上海市普陀区金沙江路 1516 弄',
  69.         phone: '19029384851'
  70.       }]
  71.     }
  72.   }
  73. }
  74. </script>
  75. <style scoped>
  76.   .print-container {
  77.     width: 1000px;
  78.     margin: 0 auto;
  79.   }
  81.   .print-button-container {
  82.     display: flex;
  83.     justify-content: flex-end;
  84.     margin-top: 15px;
  85.   }
  86. </style>

表格效果：

image.png

2. 调用浏览器的打印方法

  1.     <div class="print-button-container">
  2.       <el-button type="primary" icon="el-icon-printer" @click="handlePrint">打印</el-button>
  3.     </div>
  1. /**
  2.  * 调用浏览器的打印方法
  3. */
  4. handlePrint() {
  5.    window.print()
  6. }

打印预览：

image.png

可以看到，el-table默认的边框样式在打印时并不怎么清晰，右边框和底部边框还出现了丢失；顶部和底部出现了页眉和页脚；打印按钮也没去掉。接下来将逐步优化打印的效果。

表格样式

首先来优化el-table的样式

  1. /*字体调黑*/
  2. >>> .el-table {
  3.   font-size: 16px;
  4.   color: #000000;
  5. }
  7. >>> .el-table th {
  8.   font-weight: normal;
  9.   font-size: 18px;
  10. }
  12. >>> .el-table thead {
  13.   color: #000000;
  14. }
  16. /*边框调黑*/
  17. >>> .el-table::before {
  18.   background-color: #000000;
  19. }
  21. >>> .el-table--border::after {
  22.   background-color: #000000;
  23. }
  25. >>> .el-table--border th, >>> .el-table--border td {
  26.   border-color: #000000;
  27. }
  29. >>>.el-table--group, >>>.el-table--border {
  30.   border-color: #000000;
  31. }
  33. >>> .el-table th.is-leaf, >>> .el-table td {
  34.   border-bottom: 1px solid #000000;
  35. }
  37. /*减小单元格间距*/
  38. >>> .el-table th, >>> .el-table td {
  39.   padding: 0 0;
  40. }
  41. /*显示底部边框 估计打印时伪元素把border覆盖了 height设为0隐藏伪元素*/
  42. >>> .el-table::before {
  43.   height: 0;
  44. }
  46. /*显示右边框*/
  47. >>> .el-table--group::after, >>> .el-table--border::after {
  48.   width: 0;
  49. }

打印预览：

image.png

可以看到，优化后的表格更加清晰简洁，接下来还要设置一些特殊的，只在打印时生效的样式。

打印样式

通过@media print媒体查询设置打印时生效的一些样式：删除“打印”按钮，删除默认的页眉页脚，布局设置为纵向。

  1. @media print {
  2.   @page {
  3.     /* 纵向打印 */
  4.     size: portrait;
  6.     /* 横向打印 */
  7.     /*size: landscape;*/
  9.     /* 去掉页眉页脚*/
  10.     margin-top: 0;
  11.     margin-bottom: 0;
  12.   }
  14.   /*打印不显示打印按钮*/
  15.   .print-button-container {
  16.     display: none !important;
  17.   }
  18. }

打印预览
image (1).png
到此为止，打印的任务大功告成！！
完整demo: https://github.com/memory1668/el-table-print
参考: window.print() 前端实现网页打印详解