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;
    }
    ......
  }
}
相关推荐
qq_5470261795 小时前
Flowable 工作流引擎
java·服务器·前端
刘逸潇20055 小时前
CSS基础语法
前端·css
Sheldon一蓑烟雨任平生6 小时前
Vue3 插件(可选独立模块复用)
vue.js·vue3·插件·vue3 插件·可选独立模块·插件使用方式·插件中的依赖注入
吃饺子不吃馅6 小时前
[开源] 从零到一打造在线 PPT 编辑器:React + Zustand + Zundo
前端·svg·图形学
小马哥编程7 小时前
【软考架构】案例分析-Web应用设计(应用服务器概念)
前端·架构
鱼与宇7 小时前
苍穹外卖-VUE
前端·javascript·vue.js
啃火龙果的兔子7 小时前
前端直接渲染Markdown
前端
z-robot7 小时前
Nginx 配置代理
前端
用户47949283569157 小时前
Safari 中文输入法的诡异 Bug:为什么输入 @ 会变成 @@? ## 开头 做 @ 提及功能的时候,测试同学用 Safari 测出了个奇怪的问题
前端·javascript·浏览器
没有故事、有酒8 小时前
Ajax介绍
前端·ajax·okhttp