Vue局部打印核心是精准控制范围与可靠触发预览流程：①@media print+window.print()最轻量；②iframe动态注入内容可隔离样式；③vue-print-nb指令封装逻辑并提供beforeOpenCallback等可控回调。
Vue 中处理页面局部打印与预览，核心在于**精准控制打印范围**和**可靠触发预览流程**，而不是依赖全页 window.print()。浏览器原生打印对话框本身不提供“预览事件”，所谓“预览触发”实际是指打开打印对话框前的准备动作，或通过 iframe、第三方库模拟预览效果。
明确局部打印的三种主流实现方式
不同方式对应不同的事件处理逻辑：
-
@media print + window.print()：最轻量。通过 CSS 隐藏非目标区域（如导航栏、按钮），再调用
window.print()。此时“预览”就是浏览器弹出的原生对话框，“触发”即执行该方法。无需监听额外事件，但需确保打印区域有唯一 ID 或 class，并在@media print中精确控制显隐。 -
iframe 动态注入内容：将目标 DOM 的 innerHTML 写入隐藏 iframe，再调用
iframe.contentWindow.print()。这种方式天然隔离样式，避免干扰主页面。关键事件点在内容写入完成（doc.close()后）再调用打印，可在此处加 loading 状态或错误提示。 -
vue-print-nb / vue3-print-nb 指令方案：封装了上述逻辑。它在指令 mounted 阶段绑定点击事件，内部自动提取指定 ID 元素、复制样式、构建临时打印上下文。你只需关注
beforeOpenCallback（打印前准备，如加载异步数据）、openCallback（对话框已弹出，可关闭遮罩）等回调，这些就是你真正能“处理”的打印生命周期事件。
如何让打印前的准备更可控
很多问题出在“点一下就打”，但目标内容可能还没渲染完、图表还没画好、接口还没返回。必须把准备动作前置：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 对
v-print指令传入对象时，利用beforeOpenCallback返回 Promise。例如表格依赖接口，就在该回调里await fetchTableData()，插件会等待 Promise resolve 后再继续打印流程。 - 若用 iframe 方式，在
doc.write()前先检查this.$refs.printArea是否存在且有内容；Canvas 图表需确认chartInstance?.render()已完成，必要时加await nextTick()确保 DOM 更新。 - 避免在
@click回调里直接调用window.print()，应先做校验：是否为空数据、是否处于加载中、是否需要用户确认。
“预览”不是浏览器事件，而是你的主动控制点
浏览器没有 onprintpreview 这类事件。所谓预览，本质是两个动作：
立即学习“前端免费学习笔记（深入）”；
-
视觉预览：用 CSS 模拟打印效果（如加
.print-preview { background: #fff; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }），让用户提前看到排版； - 行为预览：调用打印前，弹出确认框、显示 loading、或生成 PDF 预览页（用 html2pdf.js 或 print-js 加载 URL）。这些全由你代码控制，可绑定在按钮 click 之后、真正打印之前。
特别注意表格分页与表头重复
这是局部打印中最容易被忽略的“事件副作用”。浏览器打印引擎对长表格默认不分页保留表头。解决方案不在事件监听，而在 HTML 结构：
- 确保表格使用语义化标签：
<table><thead><tr><th>列名</th></tr></thead><tbody><tr><td>数据</td></tr></tbody></table>； - CSS 中添加：
@media print { thead { display: table-header-group; } tbody { display: table-row-group; } }； - vue-print-nb 默认支持 this 行为，但前提是你的表格结构合规——这不是事件处理，而是结构前提。
