window.print()预览时表格显示不全

  • 问题描述:使用element的table组件,表格列宽为自适应,但使用window.print()方法预览的页面会直接按预览宽度截取表格内容进行展示,造成表格可能的显示不全问题

  • 解决方法:添加如下样式

css 复制代码
@media print {
  ::v-deep {
    // 表头过长自动换行
    .el-table__header-wrapper {
      .cell {
        white-space: pre-wrap !important;
      }
    }
    // 打印预览下表格不超出可视区
    table {
      table-layout: auto;
    }
    .el-table__header-wrapper .el-table__header {
      width: 100% !important;
    }
    .el-table__body-wrapper .el-table__body {
      width: 100% !important;
    }
    ......
  }
}
相关推荐
神秘的猪头5 分钟前
🧱 深入理解栈(Stack):原理、实现与实战应用
前端·javascript·面试
用户2965412759175 分钟前
JSAPIThree UI 控件学习笔记:用内置控件提升交互
前端
明教教主张5G5 分钟前
Vue响应式原理(13)-ref实现原理解析
前端·vue.js
StockPP12 分钟前
印度尼西亚股票多时间框架K线数据可视化页面
前端·javascript·后端
kungggyoyoyo39 分钟前
TRAE中国版SOLO模式上线!我用它从0到1开发了一款AI小说编辑器
前端·vue.js·trae
ohyeah41 分钟前
栈:那个“先进后出”的小可爱,其实超好用!
前端·数据结构
心随雨下1 小时前
typescript中Triple-Slash Directives如何使用
前端·javascript·typescript
自在极意功。1 小时前
AJAX 深度详解:从基础原理到项目实战
前端·ajax·okhttp
s***4531 小时前
SpringBoot返回文件让前端下载的几种方式
前端·spring boot·后端
海上彼尚1 小时前
[逆向] 1.本地登录爆破
前端·安全