chrome浏览器打印表格使用element-table时,表格边框缺失问题

NO.1
问题场景

element-plus表格浏览器有页面边框显示正常,打印时边框失效

需要打印时也保持一致,颜色加深,边框正常显示无错位

image-20220607212146472

NO.2
解决方式

勾选浏览器打印配置中的背景图形选项,边框就有了

但是为了避免每次需要手动勾选,后面会加上专门的css设置打印属性

image-20220607212205559

NO.3
边框加深

打印出来的效果,边框颜色太浅

需要改为#000000颜色,不需要默认的element-plus边框色

去掉el-table的border属性

使用css画1px的#000000黑色边框

:deep(.el-table--border) {
  ::before {
    background-color: #000 !important;
  }
}
:deep(*) {
  color: #000;
}
:deep(html body .el-table th .cell) {
  color: #000;
}
:deep(.el-table__cell),
:deep(.is-leaf) {
  color: #000;
  border-color: #000;
}
:deep(.el-table th.el-table__cell > .cell) {
  color: #000;
}
:deep(.el-table td.el-table__cell div) {
  color: #000;
}
:deep(.el-table--border::before),
:deep(.el-table--border .el-table__inner-wrapper::after),
:deep(.el-table--border .el-table__inner-wrapper::before) {
  background-color: #000 !important;
  border-left: 1px solid #000 !important;
}
:deep(.el-table__inner-wrapper::after),
:deep(.el-table__inner-wrapper::before),
:deep(.el-table--border::after),
:deep(.el-table--border::before) {
  background-color: #000 !important;
}
:deep(.el-table__inner-wrapper::before),
:deep(.el-table--border::before) {
  background-color: #000 !important;
}
* {
  font-family: SimSun;
}
.el-table tbody tr:hover td {
  background-color: #ffffff !important;
}
:deep(.el-table--border) {
  ::after {
    background-color: rgba(0, 0, 0, 0) !important;
  }
}
:deep(.el-table) {
  ::before {
    background-color: #000000;
  }
}
:deep(.el-table--border) {
  ::after {
    background-color: #000000;
  }
}
@wqx: 1px;
:deep(table) {
  background-color: rgba(0, 0, 0, 0) !important;
  background: rgba(0, 0, 0, 0) !important;
}
:deep(.el-table__header) {
  background-color: rgba(0, 0, 0, 0) !important;
  border-bottom: none !important;
  background: rgba(0, 0, 0, 0) !important;
}
:deep(.el-table__body) {
  background-color: rgba(0, 0, 0, 0) !important;
  background: rgba(0, 0, 0, 0) !important;
}
:deep(th) {
  border-top: @wqx solid #000 !important;
  border-right: @wqx solid #000 !important;
  border-bottom: @wqx solid #000 !important;
  background-color: rgba(0, 0, 0, 0) !important;
  background: rgba(0, 0, 0, 0) !important;
}
:deep(td) {
  border-right: @wqx solid #000 !important;
  border-bottom: @wqx solid #000 !important;
  background-color: rgba(0, 0, 0, 0) !important;
  background: rgba(0, 0, 0, 0) !important;
}
:deep(tbody .el-table__row:last-child td) {
  background: rgba(0, 0, 0, 0) !important;
  background-color: rgba(0, 0, 0, 0) !important;
}
:deep(tbody) {
  border-bottom: @wqx solid #000 !important;
}
:deep(.el-table__header-wrapper) {
  border-left: @wqx solid #000 !important;
  border-right: @wqx solid #000 !important;
  background-color: rgba(0, 0, 0, 0) !important;
  background: rgba(0, 0, 0, 0) !important;
}
:deep(.el-table) {
  border-right: @wqx solid #000 !important;
  // border-left: @wqx solid #000 !important;
  background-color: rgba(0, 0, 0, 0) !important;
  background: rgba(0, 0, 0, 0) !important;
}
:deep(.el-table__body-wrapper) {
  border-left: @wqx solid #000 !important;
  border-right: @wqx solid #000 !important;
  background-color: rgba(0, 0, 0, 0) !important;
  background: rgba(0, 0, 0, 0) !important;
}
:deep(div.el-table__inner-wrapper) {
  &::before {
    background-color: #000 !important;
  }
}

设置打印属性

  1. 设置默认横向打印

  2. 设置默认去掉页面页脚

  3. 设置默认强制使用背景图形(边框正常渲染)

@media print {
  @page {
    /* 纵向打印 */
    // size: portrait;
    /* 横向打印 */
    size: landscape;
    /* 去掉页眉页脚*/
    margin-top: 0;
    margin-bottom: 0;
  }
  // 强制使用背景图形渲染,不论是否勾选
  * {
    -webkit-print-color-adjust: exact !important;
    -moz-print-color-adjust: exact !important;
    -ms-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /*打印不显示打印按钮*/
  .print-button-container {
    display: none !important;
  }
}
NO.4
最终效果

浏览器打印效果和网页效果一致

image-20220607212231499

NO.5
使用vue-easy-print

避免用户右键开启打印,设置点击按钮开启打印

参考地址:https://www.npmjs.com/package/vue-easy-print

image-202206072122485890

END.