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;
    }
    ......
  }
}
相关推荐
做科研的周师兄23 分钟前
【MATLAB 实战】|多波段栅格数据提取部分波段均值——批量处理(NoData 修正 + 地理信息保真)_后附完整代码
前端·算法·机器学习·matlab·均值算法·分类·数据挖掘
da_vinci_x29 分钟前
图标量产:从“手绘地狱”到“风格克隆”?Style Reference 的工业化实战
前端·游戏·ui·prompt·aigc·设计师·游戏美术
利刃大大36 分钟前
【ES6】变量与常量 && 模板字符串 && 对象 && 解构赋值 && 箭头函数 && 数组 && 扩展运算符 && Promise/Await/Async
开发语言·前端·javascript·es6
天若有情67340 分钟前
ES6 模块与 CommonJS 的区别详解
前端·javascript·es6
大猫会长42 分钟前
postgreSQL中,RLS的using与with check
开发语言·前端·javascript
慧一居士1 小时前
vite.config.ts 配置使用说明,完整配置示例
前端
wusp19941 小时前
nuxt3模块化API架构
前端·javascript·nuxt3
沛沛老爹1 小时前
Web开发者进阶AI:企业级Agent Skills安全策略与合规架构实战
前端·人工智能·架构
遗憾随她而去.2 小时前
前端首屏加载时间的度量:FCP、LCP等指标的规范理解
前端
CDwenhuohuo2 小时前
安卓app巨坑 nvue后者页面要写画笔绘制功能nvue canvas
前端·javascript·vue.js