使用vue-print-nb打印el-table问题总结

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

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

javascript 复制代码
@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、解决表格打印时表格显示不全的问题

javascript 复制代码
 // 解决表格打印时表格显示不全的问题
  ::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 序号打印错乱问题

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

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

javascript 复制代码
  .noPrint {
    display: none;
  }
  @page {
    size: auto;
    // margin: 3mm; // 页边距
  }

其他打印样式

javascript 复制代码
  // 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;
  }
相关推荐
excel5 分钟前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh19 分钟前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富26 分钟前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的42 分钟前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#
全栈技术负责人1 小时前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
老华带你飞1 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
xw51 小时前
移动端调试上篇
前端
伍哥的传说1 小时前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入
@菜菜_达1 小时前
Lodash方法总结
开发语言·前端·javascript
GISer_Jing1 小时前
低代码拖拽实现与bpmn-js详解
开发语言·javascript·低代码