推荐使用 vue3-print-nb 实现 vue 3 发票打印：安装对应版本、在 main.ts 全局注册、用 ref 标记打印区域并绑定 v-print 指令，配合 print.css 强制颜色与布局，避免不兼容 css 特性。
Vue 3 项目初始化时集成打印插件实现发票打印，核心是选对插件、配好环境、绑定数据、控制样式。推荐优先使用 vue3-print-nb——它轻量、易用、专为 Vue 3 设计，无需后端或复杂模板引擎，适合快速落地发票类打印需求。
选插件：明确版本，避免踩坑
Vue 3 必须安装 Vue 3 专用版，不是 vue-print-nb：
- 运行
npm install vue3-print-nb --save（注意是 vue3-print-nb，不是 vue-print-nb） - 若项目用 TypeScript，在
src/env.d.ts中补充声明：declare module "vue3-print-nb"; - 不要全局引入 jQuery 或手动加载 hiprint 等重型方案——发票打印通常只需结构化内容输出，无需拖拽设计界面
挂载插件：在 main.ts 中全局注册
确保指令 v-print 在任意组件中可用：
- 打开
src/main.ts - 添加导入并注册：
import { createApp } from 'vue'<br>import App from './App.vue'<br>import Print from 'vue3-print-nb'<br><br>const app = createApp(App)<br>app.use(Print)<br>app.mount('#app')
写发票组件：用 ref 指向可打印区域
发票内容需包裹在独立容器中，便于局部打印和样式隔离：
- 在组件中用
ref="printRef"标记要打印的 DOM 区域 - 配合
v-print指令绑定该 ref：<button v-print:printref>打印发票</button> - 发票内容建议用语义化标签 + 内联样式或 scoped CSS 控制，例如：
<div ref="printRef" class="invoice-print"> <br> <h2>增值税专用发票</h2> <br> <p>发票号：{{ invoice.no }}</p> <br> <table>...</table> <br> </div>
调优打印效果：关键样式必须加 media="print"
浏览器原生打印默认会隐藏背景色、边框、非文本元素，发票常因此丢失颜色和布局：
- 在
public/index.html的中添加打印专用样式：<link rel="stylesheet" type="text/css" media="print" href="/print.css"> - 在
public/print.css中强制显示关键样式：@media print {<br> * { -webkit-print-color-adjust: exact; color-adjust: exact; }<br> .invoice-print { width: 210mm; margin: 0 auto; }<br> img, .bg-red { background-color: #f00 !important; }<br>} - 避免使用
vh/vw、flex gap、CSS 变量等打印兼容性差的特性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
