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;
    }
    ......
  }
}
相关推荐
又又呢2 小时前
前端面试题总结——webpack篇
前端·webpack·node.js
dog shit3 小时前
web第十次课后作业--Mybatis的增删改查
android·前端·mybatis
我有一只臭臭3 小时前
el-tabs 切换时数据不更新的问题
前端·vue.js
七灵微3 小时前
【前端】工具链一本通
前端
Nueuis4 小时前
微信小程序前端面经
前端·微信小程序·小程序
_r0bin_6 小时前
前端面试准备-7
开发语言·前端·javascript·fetch·跨域·class
IT瘾君6 小时前
JavaWeb:前端工程化-Vue
前端·javascript·vue.js
zhang98800006 小时前
JavaScript 核心原理深度解析-不停留于表面的VUE等的使用!
开发语言·javascript·vue.js
potender6 小时前
前端框架Vue
前端·vue.js·前端框架
站在风口的猪11087 小时前
《前端面试题:CSS预处理器(Sass、Less等)》
前端·css·html·less·css3·sass·html5