企业官网建设流程全解析

最近做后台管理系统时遇到一个经典需求：把页面里的表格数据打印出来。数据量不大不小，也就几百行，但真到打印环节才发现问题一堆——样式全乱、分页错位、第二页开始表头消失、表格边框断成好几截。折腾了一下午，最后用vue-print-nb把问题整套解决掉了。这篇就把完整方案写出来，尤其针对多页表格打印和样式丢失这两个最头疼的问题，把排查思路和最终配置一并分享。

1. 为什么最后选了vue-print-nb而不是自己写打印逻辑

1.1 三种常见打印方案的对比

先说结论：Vue3项目里做打印，市面上几种常见路子的体验我都试过，针对“多页表格”这个场景，vue-print-nb确实是最省事的选择。当时对比了三种方案：

方案一：window.print() + 全局CSS控制（@media print）

这个方案最原始，直接把整个页面送进打印机。数据量小、页面简单时凑合能用，但到了后台管理系统就完全不顶用——侧边栏、顶栏、表单控件全部被打出来，表格倒是没丢，但整个页面乱成一锅粥。要解决就得写一大堆CSS隐藏无关元素，而且每个打印页面都要写一套，维护成本直接拉满。

方案二：把表格内容塞进新窗口，然后在新窗口里调用print()

这个思路是自己在代码里通过window.open打开一个空白页，把表格DOM和样式拼成HTML字符串写进去再打印。听起来灵活，实际用起来问题更多：样式文件是异步加载的，打印时机很难控制；如果表格里用了组件库、图标字体，新窗口根本加载不到，出来全是乱码和原始控件样式；还要处理窗口关闭、焦点切换等一堆细节。

方案三：html2canvas把DOM转成图片后打印

这个方法适合不需要选中文案、不需要保留链接的简单场景，但放到多页表格上就是灾难。表格一长，生成的图片超高，得自己手动分页切割，切出来的边界还容易把行数据腰斩。另外图片是位图，分辨率稍低打印出来就是糊的，完全不能满足给客户看的正式报表需求。

1.2 选vue-print-nb的理由和版本注意点

vue-print-nb本质上封装了“把指定DOM区域拷贝到隐藏iframe里，再触发iframe的预览和打印”这套流程。相对上面几种方案，它有几个实打实的优势：指令式调用，只需要一行v-print就能锁定打印区域，不需要手动处理窗口；样式不丢失可以通过extraCss、打印样式文件等手段系统解决，而不是靠碰运气；对表格分页、表头重复这些问题有相对成熟的配置姿势。

需要重点提一句版本问题。Vue2用的是vue-print-nb老版，Vue3对应的是vue-print-nb新版，两个包的导入方式和回调命名有区别。Vue3里装的是vue-print-nb，在main.js里用app.use(print)完成全局注册，指令是v-print，配置项里常见的回调是printDone。如果你npm install之后发现指令一直不生效或者回调对不上，先看package.json里这个包的版本，再翻一下node_modules里附带的README，不同小版本的配置项命名确实有出入。

2. 基础接入和printObj配置项说明

2.1 安装与全局注册

安装这一步没啥特殊的，命令一行：

npm install vue-print-nb --save

安装完成后，在main.js里注册插件：

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

如果你的项目对包体比较敏感，不想全局注册，也可以按需在单个组件里局部使用。我后来为了确认局部注册的写法，查了文档，实际操作是在组件的setup里把插件引入后把它作为组件注册的插件处理，不同版本方式略有差异。为了省心，后台管理系统这种项目建议直接全局注册，反正就一行代码的事。

2.2 最简示例：一个按钮打印一张表

注册完成后，使用方式非常直接。在需要打印的DOM容器上加一个id，然后在打印按钮上写v-print指令，传入一个printObj配置对象：

<template> <div> <el-button 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.job }}</td> </tr> </tbody> </table> </div> </div> </template> <script setup> const printObj = { id: 'printArea', popTitle: '员工信息表', extraCss: [], printDone: () => { console.log('打印流程结束') } } </script>

按钮一按，就会弹出浏览器的打印预览窗口，预览内容只有id为printArea的这块区域。这个就是整个插件的核心价值：把打印范围精准锁定在目标DOM上，页面其他乱七八糟的导航、表格操作列、表单按钮都不会出现在打印结果里。

2.3 printObj核心配置项说明

printObj里常用的配置项就那么几个，但没搞明白很容易踩坑：

实际项目中，我习惯把printObj定义成一个计算属性或函数返回值，这样id对应的容器内容变化时，打印区域能同步拿到最新数据。如果直接把printObj定义成静态对象，没问题但灵活性差一些。

3. 多页打印时表格最容易翻车的三个场景

3.1 第二页起表格边框断掉的原理与修复

多页表格打印时，最普遍的问题就是：第一页边框好好的，第二页开始要么上边框没了，要么行和行之间缺了横线，看看起来就像一张桌子少了几条腿。

这个问题的根因不在vue-print-nb，而是在浏览器的分页行为。浏览器在打印分页时，默认会在内容高度足够的地方直接把页面切断，而这个切断点恰好落在表格的行（tr）中间。一行数据被上下分割成两截，分页处那一行的上下边框自然就断掉了。

修复方案也不是什么高深技巧，就是给tr设置分页保护：

@media print { tr { break-inside: avoid; page-break-inside: avoid; } }

这里两个属性都写上，是因为老版本浏览器主要认page-break-inside，新标准是break-inside，两者兼容性互补。这样浏览器在分页时，就会尽量把一整行挪到下一页，而不是从中间截断。实测下来，几百行数据的表格基本不会再有边框断裂的情况。

3.2 分页后表头不重复的问题

第二个高频问题：十几页的表格，只有第一页有表头，第二页开始全是数据，翻到第5页根本不知道每一列是什么内容，对接的财务同事直接打电话来问这页的数字是啥意思。

原因是浏览器默认只把表格的第一行当作表头，分页后不重复。要让每一页都出现表头，在打印样式里加这段：

@media print { thead { display: table-header-group; } }

这个CSS的作用就是强制thead在每个打印页都重复显示。前提是你的表格结构是标准的table > thead > tr > th，如果你用div模拟的假表格、或者用了flex布局来排版表头和数据行，那这个方案就不生效，得回归到原生table结构才能用。

这里有个小细节，如果表格底部还有合计行（tfoot），默认每页也不会出现。如果你需要每页都显示合计行，可以给tfoot也加同样的样式，或者把合计行单独抽出去不放进打印区域，看业务需要而定。

3.3 el-table固定列在打印时错位

后台管理系统里，表格大概率用的是element-plus的el-table，尤其是带固定列（fixed属性）的表格，数据多的时候那种左右锁定的效果确实好用。但打印的时候，el-table会给你上一课。

原理不复杂：el-table的fixed列并不是真的“钉在”表格里，而是把表格拆成了多层结构，通过JS计算滚动位置同步位移，本质上是多个表叠加渲染的效果。打印时iframe拿到的是已经渲染完成的DOM，多层表格结构全都原样保留，结果就是打印出来表头错位、宽度对不上、固定列的内容飘在表格外面。

这个问题没有直接在vue-print-nb里一键解决的选项，常规做法是准备两套表格：屏幕上展示el-table，交互体验好；打印区域里用原生table渲染同样数据，样式独立控制。打印区域的原生table不加任何组件库的类名，用自己写的打印专用CSS来控制边框、列宽、字体大小，这样最可控。

4. 样式丢失的根因分析加四套解决方案

4.1 样式丢失的根因：iframe隔离与CSS失效

用了vue-print-nb后，样式还是丢了或者乱了，这种情况很常见。首先要理解vue-print-nb内部干了什么：它获取打印区域的DOM内容，拷贝到一个隐藏的iframe里，然后用iframe内部环境完成预览和打印。问题就出在这个iframe和主页面是隔离的。

具体来说，样式丢失主要有这几个渠道：

第一，scoped样式失效。Vue组件里写的