[English](./README.en.md) | 简体中文
> Vue 打印插件，简单、快速、方便、轻巧，支持 Vue 2 和 Vue 3。
本插件基于 [vue3-print-nb](https://github.com/Power-kxLee/vue3-print-nb) 开发，并使用 TypeScript 完全重写，以更好地支持 Vue 3 的 setup 函数和组合式 API。
## 📚 文档
在线文档：[https://alexpang.cn/vue-print-next/docs](https://alexpang.cn/vue-print-next/docs)
## ✨ 特性
- 支持 Vue 2 和 Vue 3，兼容性强
- 支持指令调用和手动调用 `VuePrintNext` 方法进行打印
- 完全支持 Vue 3 的 setup 函数和组合式 API
- 支持全局和局部内容打印，以及打印预览功能
- 支持设置指定 class 样式的元素忽略打印
- 支持通过 css 选择器、手动传入 Dom 节点进行局部打印
- 支持自定义纸张尺寸和方向
- 支持深色模式和窗口模式
- 支持打印工具栏自定义配置
- 支持响应式设计，适配不同设备
- 提供丰富的回调函数，满足各种打印场景需求
## 🔍 Demo
项目中提供了 Vue2 和 Vue3 的 demo 源码，可以 clone 下本项目后进行查看
- **Vue2：** /demos/vue2-demo
- **Vue3：** /demos/vue3-demo
在线 demo：[https://alexpang.cn/vue-print-next/vue3-demo](https://alexpang.cn/vue-print-next/vue3-demo)
## 📦 安装
你可以通过 npm、yarn 或 pnpm 安装该插件：
```bash
npm install vue-print-next --save
# or
yarn add vue-print-next
# or
pnpm add vue-print-next
```
## 🚀 快速开始
### 1. 全局使用插件
在你的 `main.ts` 或 `main.js` 文件中：
```typescript
import {createApp} from 'vue';
import App from './App.vue';
import {printPlugin} from 'vue-print-next';
const app = createApp(App);
app.use(printPlugin);
app.mount('#app');
```
### 2. Vue3 在组件中使用指令
```html
```
### 3. Vue2 在组件中使用指令
```html
```
### 4. 使用 `VuePrintNext` 类
如果你需要更复杂的打印逻辑，可以直接使用 `VuePrintNext` 类：
```html
```
## 📋 API 详解
### `vPrint` 指令
- **全屏打印**：``
- **局部打印**：``，其中 `#printMe` 是需要打印的 DOM 元素选择器。
### `VuePrintNext` 类
用于手动调用打印功能。
#### 参数说明
| 参数 | 类型 | 说明 | 默认值 |
|-----------------------------|---------------------------|-------------------------------------|------------|
| `el` | `string` \| `HtmlElement` | 需要打印的元素，支持 css 选择器或 dom 节点 | - |
| `standard` | `string` | 文档类型，默认是html5，可选 html5，loose，strict | 'html5' |
| `noPrintSelector` | `string[]` \| `string` | 打印时需要忽略的 css 选择器 | - |
| `popTitle` | `string` | 打印时的页眉 | 默认当前 title |
| `preview` | `boolean` | 是否启用打印预览功能 | `false` |
| `previewTitle` | `string` | 预览窗口的标题 | '打印预览' |
| `previewPrintBtnLabel` | `string` | 预览窗口中的打印按钮标签 | '打印' |
| `extraCss` | `string` | 额外的 CSS 文件路径 | - |
| `extraHead` | `string` | 额外的 `` 内容 | - |
| `url` | `string` | 打印指定的网址内容 | - |
| `asyncUrl` | `function` | 异步加载 URL 内容的方法 | - |
| `zIndex` | `number` | 预览窗口的 `z-index`值 | 20002 |
| `paperSize` | `string` | 纸张尺寸，可选值包括 'A0' 到 'A8'、'Letter'、'Legal'、'Tabloid'、'custom' | 'A4' |
| `orientation` | `string` | 纸张方向，可选值为 'portrait'（纵向）或 'landscape'（横向） | 'portrait' |
| `customSize` | `object` | 自定义纸张尺寸，仅当 paperSize 为 'custom' 时生效 | - |
| `darkMode` | `boolean` | 预览窗口是否默认使用深色模式 | `false` |
| `windowMode` | `boolean` | 预览窗口是否默认使用弹窗模式（非全屏） | `false` |
| `defaultScale` | `number` | 预览窗口默认缩放比例 | 1 |
| `previewTools` | `object \| boolean` | 预览工具栏配置，控制显示哪些工具按钮（zoom、theme、fullscreen） | `{ zoom: true, theme: true, fullscreen: true }` |
| `openCallback` | `function` | 打印窗口打开时的回调 | - |
| `closeCallback` | `function` | 打印窗口关闭时的回调 | - |
| `beforeOpenCallback` | `function` | 打印窗口打开前的回调（打印预览使用） | - |
| `previewBeforeOpenCallback` | `function` | 预览框架 iframe 加载前的回调（预览使用） | - |
| `previewOpenCallback` | `function` | 预览框架 iframe 加载完成后的回调（预览使用） | - |
## 🌰 使用示例
### 打印整个页面
```html
```
### 打印局部内容
通过指定 `id` 参数打印局部内容：
```html
```
### 使用 ref 获取打印元素
允许传入一个 dom 节点，如下，可以通过 `ref` 获取打印元素
```html
```
### 传递对象参数
```html
```
### 打印 URL
通过指定 URL 打印，并确保你的 URL 符合同源策略：
```html
```
### 忽略不需要打印的元素
通过设置 `noPrintSelector` 参数忽略不需要打印的元素：
```html
葫芦娃，葫芦娃
这是不需要打印
一根藤上七朵花
这是不需要打印
风吹雨打都不怕
这是不需要打印
```
### 异步加载 URL 内容
如果你的 URL 需要异步加载，可以使用以下方法：
```html
```
### 设置纸张尺寸和方向
可以通过 `paperSize` 和 `orientation` 参数设置打印纸张的尺寸和方向：
```html
```
> **注意**：只有当明确传入了 `paperSize`、`orientation` 或 `customSize` 参数时，vue-print-next 才会强制应用页面尺寸设置。如果没有传入这些参数，将保持浏览器默认的打印设置控制，不会覆盖用户在浏览器打印对话框中的设置。
### 自定义纸张尺寸
当需要使用非标准纸张尺寸时，可以设置 `paperSize` 为 `'custom'` 并提供 `customSize` 参数：
```html
```
### 深色模式和窗口模式
可以通过 `darkMode` 和 `windowMode` 参数设置预览界面的显示模式：
```html
```
### 自定义预览工具栏
可以通过 `previewTools` 参数自定义预览工具栏的显示：
```html
```
## 🤝 贡献指南
1. Fork 本仓库
2. 创建你的特性分支 (`git checkout -b feature/amazing-feature`)
3. 提交你的更改 (`git commit -m 'Add some amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 开启一个 Pull Request
## ⭐ Star History
## 👥 Supporters
## 📄 License
[MIT](http://opensource.org/licenses/MIT)
---
欢迎在 [GitHub Issues](https://github.com/Alessandro-Pang/vue-print-next/issues) 上讨论并提出问题或提交 Pull Request！
