一、安装vue-print-nb
没有什么前提要求,直接安装即可,但因为Vue2.0和Vue3.0有着不同的用法,因此需要安装的版本也不同,各位看官自行取舍。
Vue2.0版本安装方法:
npm install vue-print-nb --save
yarn add vue-print-nb
Vue3.0版本安装方法:
npm install vue3-print-nb --save
yarn add vue3-print-nb
二、引入Vue项目
Vue2.0引入方式:
1. 全局挂载,在main.js中引入并注册
import Print from 'vue-print-nb'
Vue.use(Print)
2. 自定义指令
import print from 'vue-print-nb'
directives: {
print
}
Vue3.0引入方式:
1. 全局挂载
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')
2. 自定义指令
import print from 'vue3-print-nb'
directives: {
print
}
三、在组件中使用
注意:一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id
<!--//需要打印的页面-->
<div id="printMe" ref="printContent">
<div class="hammer">
<h3>标题标题标题标题标题标题标题标题标题标题</h3>
</div>
<!-- //内容 -->
<div class="trail">
<p>内容内容内容内容内容内容内容内容</p>
</div>
</div>
<!--//通过按钮来调用-->
<el-button type="primary" @click="dialogVisible" v-print="printObj">打印</el-button>
data:
printObj: {
id: 'printMe',//id
popTitle: "标题",//自定义设置标题
},
四:插件优化
1.去掉页眉页脚
<style>
@page {
size: auto;
margin: 0mm;
}
</style>
2.打印內容不自动换行问题
只需要给不自动换行的标签加上 word-wrap:break-word 即可。
<style>
.procedure{
word-wrap:break-word;
}
</style>
五、简单例子
<template>
<div class="hello">
<h2>Essential Links</h2>
// 局部打印文本以及按钮
<div id="printArea">Print Area</div>
<button v-print="print">Print!</button>
</div>
</template>
script示例:
export default {
name: 'HelloWorld',
data () {
let that = this
return {
msg: 'Welcome to Your Vue.js App',
print: {
id: 'printArea',
popTitle: '配置页眉标题', // 打印配置页上方的标题
extraHead: '打印', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分割
preview: true, // 是否启动预览模式,默认是false
previewTitle: '预览的标题', // 打印预览的标题
previewPrintBtnLabel: '预览结束,开始打印', // 打印预览的标题下方的按钮文本,点击可进入打印
zIndex: 20002, // 预览窗口的z-index,默认是20002,最好比默认值更高
previewBeforeOpenCallback () { console.log('正在加载预览窗口!'); console.log(that.msg, this) }, // 预览窗口打开之前的callback
previewOpenCallback () { console.log('已经加载完预览窗口,预览打开了!') }, // 预览窗口打开时的callback
beforeOpenCallback () { console.log('开始打印之前!') }, // 开始打印之前的callback
openCallback () { console.log('执行打印了!') }, // 调用打印时的callback
closeCallback () { console.log('关闭了打印工具!') }, // 关闭打印的callback(无法区分确认or取消)
clickMounted () { console.log('点击v-print绑定的按钮了!') },
// url: 'http://localhost:8080/', // 打印指定的URL,确保同源策略相同
// asyncUrl (reslove) {
// setTimeout(() => {
// reslove('http://localhost:8080/')
// }, 2000)
// },
standard: '',
extarCss: ''
}
}
}
}
注意点
Callback函数中this指向当前print object对象,that返回Vue对象;
不需要页眉页脚可以在打印弹窗页面的更多设置里面取消选择;
不设置popTitle参数页眉标题为undifined;
popTitle参数为空时,页眉标题默认为Document Title。
六、参数说明
参数 | 作用 | 类型 | 可选项 | 默认值 |
id | 局部打印有效,标识符 | string | - | ‘printId’ |
standard | 局部打印有效,打印的文本类型 | string | HTML5/loose/strict | html5 |
extraHead | 局部打印有效,添加在打印区域的最顶端 | string | - | - |
extraCss | 局部打印有效,为打印区域提供Stylesheet样式表 | string | - | - |
popTitle | 局部打印有效,编辑页眉的标题 | string | - | Document Title |
clickMounted | 全局有效,调用v-print绑定的按钮点击事件callback | Function | - | this.Object |
openCallback | 全局有效,调用打印时的callback | Function | - | this.Object |
closeCallback | 全局有效,调用关闭打印的callback(无法区分确认or取消) | Function | - | this.Object |
beforeOpenCallback | 全局有效,调用开始打印之前的callback | Function | - | this.Object |
preview | 全局有效,控制打印预览 | Boolean | true/false | false |
previewTitle | 编辑预览页面的预览标题 | string | - | '打印预览' |
previewPrintBtnLabel | 编辑预览页面的打印按钮文本 | string | - | '打印' |
previewBeforeOpenCallback | 调用打开预览页面之前的callback | Function | - | this.Object |
previewOpenCallback | 调用打开预览页面之后的callback | Function | - | this.Object |
url | 非局部打印有效,异步加载打印指定的URL,确保同源策略相同 | string | - | - |
asyncUrl | 非局部打印有效,异步加载打印指定的URL,确保同源策略相同 | Function | - | - |
zIndex | 预览有效,预览窗口的z-index,默认是20002,最好比默认值更高 | string,Number | - | 20002 |