Vue3-printer NPM

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 加载完成后的回调（预览使用）	-