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;
}