css样式添加媒体查询 @media print {} 样式只有在打印的时候才会生效

1、解决单选框复选框打印时选中消失的问题

@media print {// 解决单选框复选框打印时选中消失的问题::v-deep .el-radio__input,::v-deep .el-checkbox__input {-webkit-print-color-adjust: exact;-moz-print-color-adjust: exact;color-adjust: exact;}
}

2、解决表格打印时表格显示不全的问题

 // 解决表格打印时表格显示不全的问题::v-deep table {table-layout: auto !important;}::v-deep .el-table__header-wrapper .el-table__header {width: 99% !important;}::v-deep .el-table__body-wrapper .el-table__body {width: 98% !important;}::v-deep #print table {table-layout: fixed !important;}::v-deep .el-table__fixed {display: none;}

3、解决table 序号打印错乱问题

 ::v-deep .el-table .el-table__cell.is-hidden > * {visibility: visible;font-size: 12px;}

4、不需要打印的内容 在标签上添加class名 noPrint 即可

  .noPrint {display: none;}@page {size: auto;// margin: 3mm; // 页边距}

其他打印样式

  // form 表单打印样式调整::v-deep .el-form-item__label {padding: 0;width: 90px !important;}::v-deep .el-form-item__content {margin-left: 90px !important;}::v-deep .el-select__caret {opacity: 0;}::v-deep .el-form-item__label {padding: 0;width: 90px !important;}// 清除input边框::v-deep .el-input__inner {max-width: 180px;padding: 0px;border: 0;}::v-deep .el-table {.el-input__inner {display: none;}}// el-select 多选清除边距，icon和背景::v-deep .el-input__icon {display: none;}::v-deep .el-tag {padding: 0;border-width: 0;}::v-deep .el-tag__close {display: none;}