企业官网建设流程全解析

简介：本资源是一份面向Vue.js前端开发者的技术实践代码包，聚焦浏览器端打印功能的完整实现方案，适用于需要在管理后台、报表系统等场景中集成定制化打印能力的中高级开发者。资源以PDF文档形式交付，共1个文件，大小133KB，内容涵盖vue-easy-print库的安装配置、打印模板组件（printUser）的结构设计、props与计算属性逻辑（如分页控制、中文数字转换）、打印触发方法及关键CSS媒体查询样式适配，特别针对表格类数据的分页、边框、字体、A4横向布局等打印细节做了完整封装。已有5209人学习下载，读者可直接复用该模板快速接入打印功能，无需从零编写样式重置与DOM可见性控制逻辑，显著降低跨浏览器打印兼容性调试成本。

1. Vue 实现浏览器打印功能的代码：不是调个window.print()就完事，而是要控制内容、样式、分页与兼容性

很多 Vue 开发者第一次接到「导出 PDF」或「打印报表」需求时，本能地写上window.print()—— 结果页面顶部导航栏、侧边菜单、按钮全被印出来，表格跨页被截断，字体缩成针尖大小，甚至 Chrome 打印预览里连「页面设置」按钮都找不到（谷歌浏览器打印页面没有页面调整按钮）。这不是浏览器 bug，而是没理解浏览器打印本质：它不是截图，而是基于 CSS 媒体查询重新渲染一份「打印专用视图」。Vue 实现浏览器打印功能的代码，核心不在 JS 调用时机，而在如何用 Vue 的响应式能力动态构造可打印 DOM 结构 + 用@media print精准接管样式 + 避开 Vue 组件生命周期导致的打印时机错位。适合需要生成带 Logo、页眉页脚、分页表格、隐藏非打印元素的业务场景，比如财务对账单、工单凭证、课程表导出。新手能照着改 class 名就跑通，而有经验的开发者会关注print()调用前的 DOM 稳定性、CSS 分页断点控制、以及vue-easy-print这类库背后封装的其实是同一套原生机制。

2. 用原生@media print+ Vue 动态 class 控制打印内容，避开第三方库也能稳定落地

2.1 为什么优先用原生方案而非vue-easy-print？

vue-easy-print是一个轻量封装，本质仍是操作 DOM 并触发window.print()，但它把「隐藏非打印区域」「临时插入打印样式」「等待 Vue 渲染完成」这些步骤打包了。但实际项目中，过度依赖这类库反而增加不可控因素：比如它内部用setTimeout等待 DOM 更新，在 Composition API +<script setup>场景下可能错过响应式更新时机；又或者它注入的全局样式和你已有的@media print规则冲突，导致页眉重复出现。真正可控的 Vue 实现浏览器打印功能的代码，起点永远是语义清晰的 HTML 结构 + 明确作用域的打印样式。我们先不引入任何 npm 包，用纯 Vue + 原生 CSS 解决最核心问题：让「只打印表格区域」这件事 100% 可预测。

2.2 构建可打印区域：用ref锁定目标 DOM，配合v-if控制渲染时机

在 Vue 组件中，不能直接对v-for生成的列表加ref，必须包裹一层容器。以下是最小可行结构：

<template> <div class="app-container"> <!-- 业务界面：导航、搜索框、操作按钮 --> <header class="app-header">销售管理后台</header> <div class="app-main"> <div class="toolbar"> <button @click="handlePrint">打印当前报表</button> <input v-model="searchKey" placeholder="搜索订单号" /> </div> <!-- 打印专用区域：用 ref 标记，且确保其独立于其他逻辑 --> <div ref="printAreaRef" class="print-area" :class="{ 'print-ready': isPrinting }" > <h2>销售订单汇总报表（{{ new Date().toLocaleDateString() }}）</h2> <table class="print-table"> <thead> <tr> <th>订单号</th> <th>客户名称</th> <th>金额（元）</th> <th>状态</th> </tr> </thead> <tbody> <tr v-for="order in filteredOrders" :key="order.id"> <td>{{ order.orderNo }}</td> <td>{{ order.customerName }}</td> <td>{{ order.amount | currency }}</td> <td>{{ order.statusText }}</td> </tr> </tbody> </table> </div> </div> </div> </template> <script setup> import { ref, onBeforeUnmount } from 'vue' const printAreaRef = ref(null) const isPrinting = ref(false) const searchKey = ref('') // 模拟数据 const orders = [ { id: 1, orderNo: 'SO2024-001', customerName: '上海智联科技', amount: 12800, statusText: '已发货' }, { id: 2, orderNo: 'SO2024-002', customerName: '深圳云启信息', amount: 8650, statusText: '待付款' } ] const filteredOrders = computed(() => { return orders.filter(o => o.orderNo.includes(searchKey.value) || o.customerName.includes(searchKey.value) ) }) const handlePrint = () => { // 关键：确保 Vue 完成本次更新再执行打印 nextTick(() => { isPrinting.value = true // 强制重排，确保 print-area 类生效 void printAreaRef.value.offsetHeight // 延迟触发，给浏览器时间应用新样式 setTimeout(() => { window.print() isPrinting.value = false }, 100) }) } </script>

注意：nextTick()是必须的。Vue 的响应式更新是异步的，isPrinting.value = true后 DOM 不会立刻重绘。若不等nextTick就调用window.print()，打印的仍是旧样式。void element.offsetHeight是强制重排（reflow）的经典技巧，确保print-readyclass 生效后再进入setTimeout。

2.3 打印样式隔离：用@media print+.print-ready精确接管布局

CSS 必须与模板强绑定，避免全局污染。重点在于三件事：隐藏非打印元素、重置打印区域样式、控制分页行为。

<style scoped> /* 1. 默认隐藏所有非打印区域 */ .app-header, .toolbar { display: block; } /* 2. 打印时隐藏它们 */ @media print { .app-header, .toolbar { display: none !important; } /* 3. 打印区域专属样式：移除内边距、使用衬线字体、固定宽度 */ .print-area { width: 210mm; /* A4 宽度 */ margin: 0 auto; padding: 0; font-family: "Times New Roman", serif; font-size: 12pt; } .print-table { width: 100%; border-collapse: collapse; margin-top: 1em; } .print-table th, .print-table td { border: 1px solid #000; padding: 6px 8px; text-align: left; } /* 4. 表格分页控制：避免跨页断行 */ .print-table tbody tr { page-break-inside: avoid; } /* 5. 强制分页：每页只显示 20 行，后面插入分页符 */ .print-table tbody tr:nth-child(20n) { page-break-after: always; } } </style>

提示：page-break-inside: avoid是解决「表格行被截断在两页之间」的核心规则。Chrome 和 Edge 支持良好，Firefox 需配合break-inside: avoid（现代写法）。20n是实用技巧：若你知道每页最多容纳 20 行，就用nth-child(20n)在第 20、40、60 行后强制分页，比page-break-after: always更精准。

3. 用vue-easy-print封装复杂场景：多区域打印、自定义页眉页脚、PDF 导出预备

3.1 安装与基础用法：它解决的是「多次打印不同区域」的协调问题

当业务需要同时打印「订单明细表」+「物流单」+「发票抬头」三个独立区块，且每个区块需不同页眉时，手动维护多个ref和@media print规则极易出错。此时vue-easy-print的价值才真正体现——它把「区域选择」「样式注入」「打印触发」解耦为声明式 API。

npm install vue-easy-print # 或 yarn add vue-easy-print

在main.js中全局注册（Vue 3）：

import { createApp } from 'vue' import VueEasyPrint from 'vue-easy-print' const app = createApp(App) app.use(VueEasyPrint)

组件内使用：

<template> <div> <!-- 多个可打印区域，用 unique-id 区分 --> <div id="print-order" class="print-section"> <h3>订单信息</h3> <p>订单号：{{ order.orderNo }}</p> <p>日期：{{ order.date }}</p> </div> <div id="print-logistics" class="print-section"> <h3>物流信息</h3> <p>承运商：{{ order.carrier }}</p> <p>运单号：{{ order.trackingNo }}</p> </div> <!-- 打印按钮绑定到特定区域 --> <button @click="printOrder">仅打印订单</button> <button @click="printBoth">打印订单+物流</button> </div> </template> <script setup> import { useEasyPrint } from 'vue-easy-print' const { print } = useEasyPrint() const order = { orderNo: 'SO2024-001', date: '2024-06-15', carrier: '顺丰速运', trackingNo: 'SF1234567890' } const printOrder = () => { print({ domId: 'print-order', // 自定义页眉：支持 HTML 字符串 header: '<div style="text-align:center;font-size:14px;">【公司LOGO】销售订单凭证</div>', // 页脚：显示页码 footer: '<div style="text-align:right;font-size:10px;">第 <span class="page"></span> 页，共 <span class="topage"></span> 页</div>' }) } const printBoth = () => { // 同时打印多个区域：传入数组 print({ domId: ['print-order', 'print-logistics'], // 全局样式覆盖 css: ` @page { margin: 1cm; } .print-section { margin-bottom: 1em; } .print-section h3 { border-bottom: 1px solid #333; } ` }) } </script>

3.2vue-easy-print的底层逻辑与你必须知道的三个参数

它并非黑盒，核心逻辑就是：克隆目标 DOM → 注入自定义样式 → 插入临时 iframe → 在 iframe 内调用print()→ 移除 iframe。因此以下三个参数直接影响成败：

注意：header和footer中的page/topage是vue-easy-print内部通过正则替换实现的，不是浏览器原生支持。若你发现页码不显示，请检查是否漏写了class="page"，且确保css中未用display: none隐藏了这些 span。

4. 解决谷歌浏览器打印页面没有页面调整按钮等高频兼容性问题

4.1 Chrome 打印预览缺失「页面设置」按钮的根因与修复

「谷歌浏览器打印页面没有页面调整按钮」这一现象，本质是 Chrome 对@media print的解析策略变更：当页面包含@page规则且设置了size属性时，Chrome 会默认隐藏「更多设置」面板中的「页面大小」选项，转而强制使用@page定义的尺寸。这并非 Bug，而是设计使然。但用户需要手动调整边距或方向时就会卡住。

修复方法：移除硬编码@page { size: A4; }，改用@page的margin和orientation单独控制。

/* ❌ 错误：锁定 A4 尺寸，导致 Chrome 隐藏设置按钮 */ @media print { @page { size: A4; margin: 1cm; } } /* ✅ 正确：只设边距和方向，保留用户调整自由度 */ @media print { @page { margin: 1.5cm; /* 左右上下统一边距 */ /* 不设 size，让用户在打印对话框选 A4/Letter */ } @page :first { margin-top: 2.5cm; /* 首页额外上边距，放页眉 */ } /* 横向打印：仅当内容宽时启用 */ .print-table-wide { width: 100vw; } @media print and (orientation: landscape) { .print-table-wide { transform: rotate(270deg); transform-origin: center; } } }

4.2 表格跨页断裂的终极方案：break-inside+break-after组合拳

page-break-inside: avoid在 Chrome 中对<tr>无效（规范限制），必须作用于<tbody>或<tr>的父容器。正确写法如下：

@media print { /* 方案1：对 tbody 设置分页避免 */ .print-table tbody { break-inside: avoid; } /* 方案2：对 tr 设置，需配合 display: table-row */ .print-table tr { break-inside: avoid; display: table-row; /* 确保 display 类型正确 */ } /* 方案3：强制每页 25 行（假设每行高度固定）*/ .print-table tbody tr:nth-child(25n) { break-after: page; } /* 方案4：针对长文本单元格，防止内部换行导致跨页 */ .print-table td { word-break: keep-all; /* 不在单词内换行 */ orphans: 3; /* 孤行控制：页末至少留3行 */ widows: 3; /* 孤行控制：页首至少留3行 */ } }

4.3 Vue 打印后样式残留：清除print-ready类并重置 DOM 状态

window.print()不会自动重置页面状态，若用户取消打印或打印失败，.print-ready类仍存在，可能导致后续操作异常。必须在afterprint事件中清理：

const handlePrint = () => { nextTick(() => { isPrinting.value = true void printAreaRef.value.offsetHeight // 监听打印结束事件（注意：此事件在打印对话框关闭后触发，包括取消） const handleAfterPrint = () => { isPrinting.value = false // 移除监听，避免重复绑定 window.removeEventListener('afterprint', handleAfterPrint) } window.addEventListener('afterprint', handleAfterPrint) setTimeout(() => { window.print() }, 100) }) }

提示：afterprint是标准事件，Chrome/Firefox/Edge 均支持。不要用onbeforeprint（已废弃），也不要依赖setTimeout模拟——它无法区分用户是点击「打印」还是「取消」。

5. 进阶技巧：用iframe实现无干扰打印 + 打印前校验数据完整性

5.1 用iframe创建纯净打印环境，彻底隔离主页面样式

前述方案依赖@media print，但当项目使用了 Tailwind CSS、Bootstrap 等大型框架时，其全局样式可能穿透到打印区域。最彻底的解法是：将打印内容注入空白iframe，在完全干净的环境中渲染并打印。

const printInIframe = (contentHTML) => { // 创建临时 iframe const iframe = document.createElement('iframe') iframe.style.position = 'absolute' iframe.style.width = '0' iframe.style.height = '0' iframe.style.border = 'none' document.body.appendChild(iframe) const doc = iframe.contentDocument || iframe.contentWindow.document doc.open() doc.write(` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>打印预览</title> <style> body { margin: 0; padding: 1cm; font-family: SimSun, "Microsoft YaHei", sans-serif; } @page { size: A4; margin: 1cm; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #000; padding: 4px; } </style> </head> <body>${contentHTML}</body> </html> `) doc.close() // 等待 iframe 加载完成 iframe.onload = () => { setTimeout(() => { iframe.contentWindow.focus() iframe.contentWindow.print() // 打印后移除 iframe document.body.removeChild(iframe) }, 300) } } // 在 Vue 方法中调用 const exportAsPrint = () => { const tableHTML = printAreaRef.value.innerHTML const fullHTML = ` <h2>销售订单汇总报表（${new Date().toLocaleDateString()}）</h2> <table>${tableHTML}</table> ` printInIframe(fullHTML) }

5.2 打印前数据校验：防止空数据或错误状态触发打印

业务中常见陷阱：用户点击打印时，表格数据尚未加载完成（loading: true），或筛选后结果为空。直接打印会导致白纸或报错。必须加入校验：

const handlePrint = async () => { // 1. 检查数据是否就绪 if (filteredOrders.value.length === 0) { ElMessage.warning('当前无符合条件的数据，无法打印') return } // 2. 检查关键字段是否为空（如金额为 0 或 null） const invalidOrders = filteredOrders.value.filter( o => o.amount == null || o.amount <= 0 ) if (invalidOrders.length > 0) { ElMessage.error(`发现 ${invalidOrders.length} 条订单金额异常，已跳过打印`) // 过滤掉异常数据再打印 const validOrders = filteredOrders.value.filter(o => o.amount > 0) // ... 渲染 validOrders 到打印区域 } // 3. 确保 DOM 已更新 await nextTick() // 执行打印逻辑 }

提示：校验必须放在nextTick()之前。因为filteredOrders是计算属性，其值变化会触发 DOM 更新，但更新完成需nextTick。若先nextTick再校验，可能拿到旧数据。

5.3 打印日志埋点：记录谁在何时打印了什么内容

对审计敏感的系统（如财务、医疗），需记录打印行为。在window.print()前发送日志：

const logPrintAction = (targetId, itemCount) => { fetch('/api/print-log', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userId: store.user.id, targetId, itemCount, timestamp: new Date().toISOString(), userAgent: navigator.userAgent }) }) } // 在打印触发函数中调用 const handlePrint = () => { logPrintAction('sales-order-report', filteredOrders.value.length) // ... 后续打印逻辑 }

打印功能不是前端的终点，而是业务闭环的关键一环。从@media print的像素级控制，到iframe的环境隔离，再到打印日志的合规留痕，每一层都在回答同一个问题：用户按下 Ctrl+P 时，我们交付的是一张纸，还是一份可信的凭证？

本文还有配套的精品资源，点击获取