vue3-printer
v1.0.2
Published
A Vue component for printing content
Downloads
18
Maintainers
qymcodingReadme
vue3-printer
本插件基于vue-print-next 开发，支持组件式打印和指令式打印，组件式打印支持自定义页眉页脚。
一、组件式
1. 全局
import { createApp } from "vue";
import App from "./App.vue";
import VuePrinter from "vue3-printer";
const app = createApp(App);
app.use(VuePrinter);
app.mount("#app");2. 单个组件使用
<script setup>
// 需要注意，这里导入的是PrintComponent，大写的P
import {PrintComponent} from 'vue3-printer';
const onPrintClick = ()=>{
printComponentRef.value.print();
}
</script>
<template>
<div>
<button @click="onPrintClick">打印</button>
<print-component ref="printComponentRef">
<template #header>
<h1>header</h1>
</template>
<template #default>
<div>
<p>这是需要打印的局部内容</p>
<p>更多内容...</p>
</div>
</template>
<template #footer>
<h4>footer</h4>
</template>
</print-component>
</template>3. 组件 API
Props
| 参数 | 类型 | 说明 | 默认值 | | ------------ | ---------------------------------- | --------------------------------------------- | ------ | | printOptions | object | 打印参数,详见下方printOptions | - | | pageMargin | string|number|string[]|number[] | 页边距,单位px,传数组时对应[上,右,下,左]的顺序 | 30 | | footer | object | 页脚配置,详见下方footer | - |
printOptions
| 参数 | 类型 | 说明 | 默认值 |
| -------------------- | ------------------- | ------------------------------------------------ | ---------- |
| standard | string | 文档类型，默认是html5，可选 html5，loose，strict | 'html5' |
| noPrintSelector | string[]|string | 打印时需要忽略的 css 选择器 | - |
| preview | boolean | 是否启用打印预览功能 | false |
| previewTitle | string | 预览窗口的标题 | '打印预览' |
| previewPrintBtnLabel | string | 预览窗口中的打印按钮标签 | '打印' |
| extraCss | string | 额外的 CSS 文件路径 | - |
| extraHead | string | 额外的 <head> 内容 | - |
| zIndex | number | 预览窗口的 z-index值 | 20002 |
footer
| 参数 | 类型 | 说明 | 默认值 | | --------- | ------- | ------------------------------------------------------------ | ------- | | isLine | boolean | 是否展示页脚的下划线 | false | | lineColor | string | 下划线的颜色(isLine为true生效) | "#000" | | lineWidth | number | 下划线宽度(isLine为true生效) | 1 | | lineStyle | string | 下划线的类型,支持dotted solid double dashed(isLine为true生效) | "solid" |
Events
| 事件 | 说明 | 回调参数 | | ------------------------- | -------------------------------------------- | -------- | | openCallback | 打印窗口打开时的回调 | - | | closeCallback | 打印窗口关闭时的回调 | - | | beforeOpenCallback | 打印窗口打开前的回调（打印预览使用） | - | | previewBeforeOpenCallback | 预览框架 iframe 加载前的回调（预览使用） | - | | previewOpenCallback | 预览框架 iframe 加载完成后的回调（预览使用） | - |
Slots
| 名称 | 说明 | | ------- | --------------------- | | default | 打印的内容 | | header | 页眉(只在打印时生效.) | | footer | 页脚(旨在打印时生效) |
二、指令式
vPrint 指令
API 使用方法和 vue-print-next 一致，详情参考vue-print-next