v-print 打印的时候右侧选项没有出现‘布局‘的问题

han_hanker

62人浏览 · 2026-03-12 15:44:26

han_hanker · 2026-03-12 15:44:26 发布

域名要https 开头

防止浏览器限制, 还可以换一下浏览器,用ie,360,火狐都试一下
我的就是谷歌浏览器不行, 其他的能出现 ‘布局’

确保样式不会过宽外层width:100%

大概率是 el-table 的内联宽度样式在构建后没有被覆盖
修复：强制重置 el-table 尺寸

#printNew2 .el-form-item {
  margin-bottom: 0px !important;
}

.printNewStyle .el-table__header {
  width: 100% !important;
}

.printNewStyle .el-table__body {
  width: 100% !important;
}

.printNewStyle .el-table__footer {
  width: 100% !important;
}

/* 不加 scoped，确保生效 */
@media print {
  /* 特别针对 el-table */
  .printNewStyle .el-table,
  .printNewStyle .el-table__header-wrapper,
  .printNewStyle .el-table__body-wrapper,
  .printNewStyle .el-table__footer-wrapper {
    width: 100% !important;
    height: auto !important;
  }

  /* 隐藏固定列，避免双重宽度 */
  .printNewStyle .el-table__fixed,
  .printNewStyle .el-table__fixed-right {
    display: none !important;
  }

  /* 允许表格内容换行 */
  .printNewStyle .el-table .cell {
    white-space: normal !important;
    word-break: break-all !important;
  }

  /* 重置页面设置 */
  @page {
    size: auto !important;
    margin: 10mm !important;
  }
}

缺少导致怪异模式

HTML 缺少声明（最可能！)
处于怪异模式
清理 public里 index.html 的表头

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit"> -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= webpackConfig.name %></title>
    <!--   <script src="static/Bmap/lib/js/BAIDU.API2.js"></script>
    <script src="static/Bmap/lib/js/getModules.js"></script>-->
    <!-- <script src="../../bmap-offline/map3.0_init.js"></script> -->
    <!-- <script src="../../bmap-offline/map3.0.js"></script> -->
    <!--    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=F5g7TtwB3sBzNS7AKWvtCQTtCqlxxtGw"></script>-->
    <!-- <script src="./static/js/tinymce.min.js"></script> -->
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

<template>
  <div id="printNew1">
    <!-- 👇 关键：这个注释会被复制到 iframe，并“欺骗”浏览器进入标准模式 -->
    <!--[if !IE]>--><!DOCTYPE html><!--<![endif]-->
    
    <!-- 你的实际内容 -->
    <div class="content">...</div>
  </div>
</template>

避免使用 @page { size: … }（确保不干扰

/* ❌ 不要写 */
@media print {
  @page {
    size: portrait; /* 这会覆盖用户选择 */
  }
}

/* ✅ 正确：只设边距 */
@media print {
  @page {
    margin: 10mm;
  }
}

防止页面断裂

@media print {
  /* 防止页面断裂 */
  .el-descriptions {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .pt10-1 {
    border-top: 1px solid #dfe6ec;
    position: static !important;
    top: 0 !important;
    padding-top: 0 !important;
  }
}

v-print="'printId'"

合肥城市开发者社区

助力合肥开发者学习交流的技术社区，不定期举办线上线下活动，欢迎大家的加入

更多推荐

深入解读OpenClaw配置文件：一个现代化AI网关的全景洞察

合肥城市开发者社区

2026年3月13日AI热点：芯片大战、Agent爆发、安全争议

芯片竞争加剧：Nvidia 260亿投入开源，Meta 4款新芯片Agent时代来临：Nvidia开源平台、OpenAI追赶Claude CodeAI安全争议：Anthropic起诉国防部、青少年AI滥用问题应用层创新：Google全家桶AI化、亚马逊Alexa个性化本文由AI助手收集整理 | 来源：Hacker News, The Verge, WIRED, arXiv。