vue页面使用v-print指令打印表格表单的几种方法,包括页眉标题自定义设置
页面效果:
打印预览页面:
步骤:
1.安装vue-print-nb
2.在main.js里面注册
import Print from 'vue-print-nb' Vue.use(Print)
3.在页面.vue代码中定义打印范围和打印按钮，我这里是以id="main-div"这个div为范围进行打印
<div>
<div id="main-div" >
<table >
</table >
</div>
<el-button ref="printClick" type="primary" v-print="printObj">这是打印按钮</el-button>
</div>
4.在data里面设置printObj和页眉标题
data() {
return {
printObj: {
id: '#main-div', // 打印范围
popTitle: 'XXXX登记管理系统' // 页眉标题
},
5.运行起来即可实现打印效果,左侧是打印的预览图，右边的打印设置，在目标打印机选项中还可以选择另存为pdf。
这里演示的第一种写法，稍微繁杂一些，但功能细节更多，第一种方法不需要在data里面设置printObj和页眉标题
第一种
<el-button v-print="'#main-div'" type="primary" popTitle="aaaa">第一种打印方法按钮</el-button>
第二种
<el-button ref="printClick" type="primary" v-print="printObj">这是打印按钮</el-button>