企业官网建设流程全解析

做后台系统开发的同学，我估计没人能躲过“把表格打出来”这个需求。最近在 Vue3 项目里，我就被考勤表、项目清单这类多页表格折腾了一轮，用 vue-print-nb 确实能打，但要达到“表头每页都重复、边框底色还在、行不被拦腰截断”这种用户眼里最基本的及格线，里面还是有不少门道。这篇文章不绕弯子，直接把 Vue3 里用 vue-print-nb 做多页表格打印的完整思路，以及样式不丢失的几个可落地解决方案，一次讲清楚。

这套方案我已经在真实项目里跑通，前后踩了很多坑。如果你是正在处理表格打印需求、或者对打印插件选型摇摆不定的前端同学，这篇内容应该能帮你少走不少弯路。尤其是最后的问题排查清单，建议直接抄走。

1. 先弄明白：为什么打印表格老是“散架”

很多朋友一上来就找代码、装插件，结果样式丢了、页码乱了，调了大半天也不知道问题出在哪。我建议先花十分钟理解打印这件事的底层机制，后面所有方案你都自己能推出来，而不是靠试。

1.1 浏览器打印和 vue-print-nb 的工作机制

浏览器打印页面，说白了就是把当前网页“截成”一张适合纸张的布局去渲染，和你在屏幕上看到的并不是同一套体系。屏幕是连续的长画布，纸是分页的，所以浏览器会按照页面高度对内容做切分。表格这种结构在分页时最吃亏，浏览器默认会把一个<tr>行拆到两页，或者把表头留在上一页，非常难看。

vue-print-nb 的核心思路其实很朴素：把你要打印的那块 DOM 找出来，克隆到一个隐藏的 iframe 里，然后调用 iframe 的打印方法。这样做的好处是“精确打印”，不会被页面上其他按钮、弹窗、侧边栏干扰。但问题也随之而来——克隆的是 DOM 节点，并不代表克隆了完整的样式上下文。你的 scoped 样式、异步加载的组件样式、甚至某些写在父组件里的样式，都可能没被带进 iframe。

搞清楚这个原理，再回头看“样式不丢失”这个问题，本质就一句话：让打印 iframe 里能拿到它需要的全部 CSS。后面所有方案都是围绕这个点在做文章。

1.2 样式丢失的三个常见来源

实际项目里，样式丢失通常来自三个场景。

第一类是 scoped 样式。Vue 的 scoped 样式会给元素加上>npm install vue-print-nb-jeecg --save

装完在入口文件里注册：

import { createApp } from 'vue' import App from './App.vue' import print from 'vue-print-nb-jeecg' const app = createApp(App) app.use(print) app.mount('#app')

注册后，插件会在全局注册一个v-print指令。这个指令可以直接用在任何按钮、链接上，作用是：点击该元素时，触发对指定 DOM 区域的打印。

2.2 最小可打印示例

一个最基础的打印按钮，长这样：

<template> <div> <el-button type="primary" v-print="printObj">打印当前表格</el-button> <div id="printArea"> <table> <thead> <tr> <th>姓名</th> <th>部门</th> <th>工时</th> </tr> </thead> <tbody> <tr v-for="item in list" :key="item.id"> <td>{{ item.name }}</td> <td>{{ item.dept }}</td> <td>{{ item.hours }}</td> </tr> </tbody> </table> </div> </div> </template> <script setup> const printObj = { id: 'printArea', popTitle: '员工工时统计表' } </script>

这里id就是要打印区域的 DOM id，popTitle是打印预览里看到的页面标题。点击按钮后，浏览器会弹出打印对话框，里面显示的就是#printArea这个 div 的内容。

2.3 需要理解的关键参数

除了上面这两个，printObj 里还有一些常用配置项，我整理成了一个表：

beforeOpenCallback是后面“样式不丢失”方案里非常关键的一个钩子，先记住它。openCallback可以用来在 iframe 完全加载后做最后干预，比如手动给某些元素补内联样式。

3. 多页表格的排版控制：表头、分页与页面方向

样式问题之外，多页表格还有一类“硬伤”属于排版层面。表格超过一页时，浏览器默认行为非常反人类：第一页有表头，第二页就没有了；一个行可能被切到页面中间，上半截在第一页，下半截在第二页。

3.1 让表头每页都重复

解决表头不重复的问题，核心是 CSS：

#printArea thead { display: table-header-group; }

table-header-group这个属性值的作用，就是告诉浏览器：这个表格的行组属于“表头组”，分页时要在每页顶部都重复渲染一次。这个属性对原生<table>结构非常有效，但对 Element Plus 这类组件库的表格不一定生效，因为 el-table 不是原生 table 结构，它的表头是用一堆 div 拼出来的。

所以这里有个重要判断：如果你用 el-table，想在打印时表头每页都重复，最稳妥的方式不是去调 el-table，而是在打印区域里渲染一份原生 table。这一点后面第四节会展开讲。

3.2 防止行被拦腰截断

表格行跨页截断，看起来特别业余。用 CSS 可以控制：

#printArea tr { break-inside: avoid; } #printArea td, #printArea th { break-inside: avoid; }

break-inside: avoid的意思是尽量不让元素内部发生分页断点。对tr设置之后，浏览器会把整行尽量放在同一页；如果一行内容太长，放不下时再整体移到下一页，而不会截断在中间。

还有一些细节容易被忽略。比如单元格里有很长的连续文本（比如邮箱地址、订单号），可能会被硬生生截断，最好配合：

#printArea td { word-break: break-all; }

让它能正常换行，这样行高才可控，分页也更准确。

3.3 页面尺寸、方向与边距调整

打印的纸张方向影响很大。列数多、每个单元格内容长的表格，竖排打印出来字会非常挤，这时候横向打印更合适。两种方式：一种是通过@page规则，另一种是用插件参数。

CSS 方式：

@page { size: A4 landscape; margin: 10mm 12mm; }

landscape是横向，portrait是纵向。margin控制页边距，注意这里不能用px，打印单位通常用mm或cm更准确。

插件方式：在 printObj 里设置direction: 'horizontal'。这个参数在不同版本里表现不完全一致，所以我个人更推荐直接用@page来做，兼容性更好。而且@page写在全局样式里，不影响屏幕展示，只有打印时才生效。

如果你发现表格还是太宽，可以再配合：

#printArea table { width: 100% !important; font-size: 12px; }

4. 样式不丢失的三种实战方案

前面铺垫了很多，现在到干货环节。样式不丢失，我实际用过并且验证可行的方法有三种，按复杂度和可维护性排序。

4.1 方案一：打印区域全内联样式

这是最“土”但最稳的方案。适用场景：打印的表格结构简单、行数列数固定、不太需要维护，比如季度汇总表、个人简历打印。

做法就是把打印区域里的每个<td>、<th>直接写上style属性：

<table style="width: 100%; border-collapse: collapse; font-size: 13px;"> <thead> <tr> <th style="background: #f0f2f5; border: 1px solid #dcdfe6; padding: 8px;">姓名</th> </tr> </thead> <tbody> <tr> <td style="border: 1px solid #dcdfe6; padding: 8px;">张三</td> </tr> </tbody> </table>

为什么说最稳？因为内联样式直接写在 DOM 属性上，克隆节点的时候会原封不动带进 iframe，不依赖外部任何样式表。打印 iframe 里就算没有任何 CSS，它也能恢复出你想要的边框和背景色。

缺点也很明显：维护成本高，而且在 Vue 项目里写一堆内联样式，谈不上优雅。所以这个方案适合“一锤子买卖”的场景，比如一次性打印页面、活动表单打印。

4.2 方案二：注入全量样式到打印 iframe

这个方案是我在项目里最常用的。思路是：利用beforeOpenCallback，在打印 iframe 打开之前，把当前页面里所有有用的样式文本收集起来，塞给 vue-print-nb，让它注入进 iframe。

代码长这样：

function collectStyles() { let cssText = '' const styleSheets = document.styleSheets try { for (let i = 0; i < styleSheets.length; i++) { const sheet = styleSheets[i] const rules = sheet.cssRules if (!rules) continue for (let j = 0; j < rules.length; j++) { cssText += rules[j].cssText } } } catch (e) { console.warn('collect styles error:', e) } return cssText } const printObj = { id: 'printArea', popTitle: '员工考勤明细表', beforeOpenCallback() { this.styles = [collectStyles()] } }

需要注意一个点：这个技巧其实是在插件的 options 上动态加了styles字段来传入样式数组。具体字段名以你安装的插件版本为准，确实存在版本差异。如果你用的版本不支持这个参数，那就换成另一个思路：在beforeOpenCallback里手动往打印 iframe 的 head 标签中插入一个<style>。

async beforeOpenCallback() { const style = document.createElement('style') style.textContent = collectStyles() // 找到 iframe 的 head 并插入 const iframe = document.querySelector('iframe') if (iframe && iframe.contentDocument) { iframe.contentDocument.head.appendChild(style) } }

这里有个坑需要提醒：不同版本里 iframe 的挂载时机不同，beforeOpenCallback触发时 iframe 不一定已经渲染到 DOM。如果你遇到这个问题，就把操作挪到openCallback里执行，那个阶段 iframe 已经就绪。

收集全量样式的好处是省心，一锅端。缺点是样式体积会很大，有些无关页面的样式也混进去了，极端情况下可能造成打印 iframe 里样式冲突，反而把表格搞乱。解决办法是给打印区域的最外层包裹一个独特 class，比如.print-wrapper，然后只收集包含这个 class 的 CSS 规则。不过 CSS 规则的选择器解析比较麻烦，实践上直接全量注入再单独覆盖，反而是性价比最高的路径。

4.3 方案三：用原生 table 重建打印模板

我不知道你有没有遇到过这种情况：el-table 的样式在屏幕上完美得不行，一打印就乱套。不是你代码写错，是 el-table 的结构本身就不适合打印。我后来学乖了，凡是涉及打印的表格，一律不用组件库表格，而是 v-for 渲染一个纯正原生 table。

打印区域里维护一份独立的原生表格模板，专门服务打印需求，在业务组件里通过计算属性或方法把同一份数据映射过去：

<div id="printArea" class="print-wrapper"> <h3 style="text-align: center; margin: 0 0 12px;">员工月度考勤表</h3> <table class="print-table"> <thead> <tr> <th v-for="col in columns" :key="col.key">{{ col.title }}</th> </tr> </thead> <tbody> <tr v-for="row in tableData" :key="row.id"> <td v-for="col in columns" :key="col.key"> {{ row[col.prop] }} </td> </tr> </tbody> </table> </div>

对应的打印样式，我建议单独抽一个print.css文件：

@media print { .print-wrapper * { box-sizing: border-box; } .print-wrapper table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; } .print-wrapper th, .print-wrapper td { border: 1px solid #dcdfe6; padding: 6px 8px; text-align: center; word-break: break-all; } .print-wrapper thead { display: table-header-group; } .print-wrapper tr { break-inside: avoid; } }

table-layout: fixed这个属性很关键，它能让表格按固定算法分列，避免内容过长时把某一列撑得很宽、其他列被挤变形。打印表格的列宽控制，靠这个能省很多事。

这套方案的思路，说白了就是把打印从业务 DOM 中解耦出来。屏幕展示用 el-table 怎么花哨都行，打印区域只用原生整洁的表结构。你可能会问：这样不是要维护两份模板吗？其实不用，打印模板里的columns和你页面上的 el-table 列配置完全可以是同一个数组，只是渲染目标不同而已。数据源也一份，没有任何额外成本。这也是我最终推荐大多数项目采用的方案。

5. 完整实操：把员工考勤表做到“能看又能打”

理论讲了一大堆，不如直接看一个完整的实操记录。下面是我在项目里做的一个员工考勤明细打印功能，从页面布局到最终调优，全流程走一遍。

5.1 场景定义与数据准备

需求方要求：打印一张表格，包含“序号、姓名、部门、日期、上班时间、下班时间、工时、备注”，数据 30 到 50 行，要求表头每页重复，行不能截断，边框和表头背景色必须显示，纸张默认 A4 横向。

页面上有筛选条件和一份 Element Plus 表格。点击“打印”按钮时，希望直接用当前筛选结果生成打印内容。

数据部分我用一个计算属性：

const printData = computed(() => { return filteredList.value.map((item, index) => ({ index: index + 1, name: item.name, dept: item.dept, date: item.date, startTime: item.startTime, endTime: item.endTime, hours: item.hours, remark: item.remark || '—' })) })

5.2 打印模板的组装

在页面上放一个打印按钮，以及一个默认隐藏的打印区域：

<el-button v-print="printObj" :loading="printing">打印考勤表</el-button> <div id="printArea" class="print-wrapper" style="display: none;"> <h3 style="text-align: center; margin: 0 0 10px;">员工考勤明细表</h3> <p style="text-align: right; font-size: 12px; margin: 0 0 6px;">打印日期：{{ today }}</p> <table class="print-table"> <thead> <tr> <th style="width: 40px;">序号</th> <th>姓名</th> <th>部门</th> <th>日期</th> <th>上班时间</th> <th>下班时间</th> <th>工时</th> <th>备注</th> </tr> </thead> <tbody> <tr v-for="row in printData" :key="row.index"> <td>{{ row.index }}</td> <td>{{ row.name }}</td> <td>{{ row.dept }}</td> <td>{{ row.date }}</td> <td>{{ row.startTime }}</td> <td>{{ row.endTime }}</td> <td>{{ row.hours }}</td> <td>{{ row.remark }}</td> </tr> </tbody> </table> </div>

这里有几个细节值得说。

打印区域默认display: none，v-print 在克隆 DOM 时会不会克隆不到内容？实测下来，vue-print-nb 会直接获取指定 id 的 outerHTML，display: none不会影响克隆结果，所以隐藏打印区域没问题。

表头列的宽度，只给“序号”列设了 width，其他列让浏览器自动分配。打印表格不建议所有列都写死宽度，特别是数据长度不固定的“备注”列，写死反而容易溢出。

today是我在 setup 里生成的当前日期字符串，打印在表头下方，方便留档。

5.3 样式注入与效果调优

打印样式我放在全局样式的@media print里，同时也在beforeOpenCallback里做了兜底，把关键样式以字符串形式注入打印 iframe：

const printObj = { id: 'printArea', popTitle: '员工考勤明细表', beforeOpenCallback() { printing.value = true }, openCallback() { printing.value = false }, closeCallback() { printing.value = false } }

这里printing用来控制按钮的 loading 状态，避免用户重复点击。打印预览打开后，openCallback触发，loading 取消；打印对话框关闭后，closeCallback再做一次兜底恢复。

实际打印预览中的表格效果，比直接用 el-table 打印要干净得多：每页顶部都有表头，行的分割位置没有出现半个行被切断的情况，边框和表头底色（: #f0f2f5）都正常显示。横向 A4 下，8 列内容排列宽松，字体 12px 也清晰可读。

还有一个细节：打印区域里我用了border-collapse: collapse，让相邻单元格的边框合并，不会出现“双边框”的粗线。这个在打印表格时属于基础审美，很多默认表格样式是separate，打出来边框很粗很愣，记得手动改成collapse。

6. 高频问题排查与避坑实录

最后这部分，我把实际使用中高频踩到的问题集中列一下。有些来自我自己的项目，有些是我在社区里帮人看代码时碰到的，都有比较明确的排查方向。

6.1 表格背景色、斑马纹打印不出来

现象：页面上表格有背景色或者斑马纹，打印预览里全部变白。

原因：浏览器默认不打印背景色，这是打印渲染的“出厂设置”，和插件无关。

解决：在打印样式里显式声明：

* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

注意，这个属性要能作用到打印 iframe 里的元素上。如果你的背景色是内联样式写在行上的，就直接给对应元素加上那段声明。另外，如果打印预览里还是有问题的按钮，勾选浏览器打印对话框里的“背景图形”选项也能临时救场，但作为产品功能，我们不可能要求每个用户都去勾，所以 CSS 声明才是正道。

6.2 打印预览里多出一页空白页

现象：内容明明只占一页多一点，但打印预览里多了一个空白页。

原因：最常见的是打印区域外层有其他隐藏元素，它的高度被计算进去了；或者打印区域内部有margin溢出的元素，把最后一页撑了出来。

排查方法：打开打印预览，看空白页是在内容前还是内容后。在内容后，大概率是打印区域内部的tr或table有 margin，或者最后一行下面有::after伪元素。可以给打印区域最外层加：

#printArea { margin: 0; padding: 0; } #printArea * { margin: 0; padding: 0; }

然后再逐个排查。如果在内容前面有空白页，常见原因是页面上的position: fixed元素在 iframe 顶部计算高度导致的。给这类元素加打印隐藏：

@media print { .header, .sidebar, .fixed-footer { display: none !important; } }

6.3 点击打印按钮没有反应或控制台报错

现象：点击按钮后什么都不弹，控制台有报错Cannot read properties of null之类的。

原因：绝大多数情况是id写错了，vue-print-nb 找不到要打印的 DOM。还有一种玄学情况：打印区域的 DOM 是v-if渲染的，点击打印时 DOM 还没有挂载完。

解决：先确认id和模板里的id完全一致，包括大小写。如果是v-if控制的打印区域，改成v-show或者在点击打印时加一个nextTick：

const handlePrint = () => { nextTick(() => { // 手动触发某些打印逻辑，或确保 DOM 已渲染 }) }

v-show 方案更稳，因为 DOM 一直存在，只是隐藏显示切换，打印克隆不受影响。

6.4 表格中的图片、二维码打印不出来或空白

现象：表格里有用户头像、订单二维码，预览里这些区域是空的。

原因：如果图片是后端接口返回的 URL，或者用了跨域资源，打印 iframe 里图片加载不了；如果是 Canvas 绘制的二维码，canvas 本身可以被打印，但某些情况下尺寸会失真。

解决：对关键图片，建议在打印前把图片转成 base64 数据。做法是先用fetch请求图片，再转成 Blob，通过FileReader或canvas.toDataURL拿到 base64，塞进打印模板的src里。这个方法在头像打印、签名打印场景中非常实用，网上有现成的工具函数，我就不贴大段代码了，关键词搜“图片转 base64 前端”即可。如果有多个图片要处理，记得等所有图片转换完成后再打开打印预览，可以在beforeOpenCallback里做 await。

6.5 防坑小抄：打印前该检查的五件事

我在多次被坑之后，整理了一个检查清单，每次上线打印功能前都会过一遍：

1. 打印区域 id 是否唯一，模板里是否多次出现同名 id。
2. 打印区域里的数据是否已经完整渲染，有没有异步接口还没回来的情况。
3. 背景色是否在打印样式里做了print-color-adjust声明。
4. 表格是否设置了border-collapse: collapse和table-layout: fixed。
5. 页面上的按钮、弹层、侧边栏是否在@media print里全部隐藏。

最后再多说一句：如果项目里打印的数据量特别大，比如几千行、甚至上万行的报表，前端打印这条路其实不太合适，更多要考虑后端直接生成 PDF。vue-print-nb 适合的是“几十行到小几百行的中等数据量”的打印场景，既能保持交互灵活，又不用给后端增加额外接口负担。

我在多次用下来，最大的体会是：打印功能看着是个小需求，但它很考验对浏览器渲染机制的理解。别指望插件解决所有问题，把 DOM、样式和打印三者之间的关系理清楚了，后面不管用什么打印方案，你都能快速排查问题，而不是停留在“换个插件试试”的阶段。