1、安装
npm install vue-print-nb --save2、引入
// main.js
import Print from 'vue-print-nb'
Vue.use(Print)3、参数
| 参数 | 作用 | 类型 | 可选项 | 默认值 |
|---|---|---|---|---|
| id | 局部打印有效，打印区域的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 |
4、完整代码
<template>
<div id="printArea">
<el-button class="print print-hidden" v-print="print">打印</el-button>
<div class="content">1111</div>
</div>
</template>
<script>
export default {
name: 'test',
data() {
return {
print: {
id: 'printArea', // 打印区域的id
standard: '', // 打印的文本类型
extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
extraCss: '', // 为打印区域提供Stylesheet样式表
popTitle: '打印', // 打印配置页上方标题
preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
url: '', // 打印指定的URL
zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
beforeOpenCallback() { }, // 开启打印前的回调事件
openCallback() { }, // 调用打印之后的回调事件
closeCallback() { }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
previewBeforeOpenCallback() { }, //预览窗口打开之前的callback（开启预览模式调用）
previewOpenCallback() { }, // 预览窗口打开之后的callback（开启预览模式调用）
}
}
}
}
</script>
<style lang="scss" scoped>
.detail-content {
width: 1247px;
margin: 63px auto;
background-color: #fff;
position: relative;
padding: 15px 48px;
.print {
position: absolute;
right: 48px;
top: 15px;
z-index: 100;
width: 80px;
min-width: 0px;
}
}
</style>
<style media="print">
/* 去除打印的页眉页脚 */
@page {
size: auto;
margin: 3mm;
}
/* 隐藏打印区域中的class为 print-hidden 的dom */
@media print {
.print-hidden{
display: none;
}
}
/* 去除打印最后一页空白页 */
html {
background-color: #ffffff;
height: auto;
margin: 0px;
}
</style>5、注意
（1）隐藏打印的页眉页脚
<style media="print">
/* 去除打印的页眉页脚 */
@page {
size: auto;
margin: 3mm;
}
</style>
（2）隐藏打印区域不需要打印的内容
<style media="print">
/* 隐藏打印区域中的class为 print-hidden 的dom */
@media print {
.print-hidden{
display: none;
}
}
</style>（3）去除打印最后一页空白页
<style media="print">
/* 去除打印最后一页空白页 */
html {
background-color: #ffffff;
height: auto;
margin: 0px;
}
</style>