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;
    }
    ......
  }
}
相关推荐
前端开发爱好者19 分钟前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者20 分钟前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
weixin_4569042741 分钟前
Vscode中开发VUE项目的调试方案
ide·vue.js·vscode
BillKu42 分钟前
容器元素的滚动条回到顶部
前端·javascript·vue.js
weixin_423391931 小时前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js
weixin_423391931 小时前
React Hooks 钩子
前端·javascript·react.js
CUGGZ1 小时前
第三代 React,怎么玩?
前端·javascript·react.js
星哥说事1 小时前
狂揽82.7k的star,这款开源可视化神器,轻松创建流程图和图表
前端
硅基宙宇AIGC1 小时前
阿里Qoder重磅登场:AI编程平台新王者,程序员的饭碗要换了吗?
前端
影i1 小时前
跨域登录 / Token 共享 踩坑记录
前端