1、安装
npm install vue-print-nb --save
2、引入
// 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>