1. 安装插件
在命令行中执行以下命令,安装 vue-print-nb 插件:
npm install vue-print-nb --save
2. 引入插件
在 main.js 文件中引入插件,并将其注入到 Vue 实例中
import Vue from 'vue'
import VuePrintNB from 'vue-print-nb'
Vue.use(VuePrintNB)
3. 触发打印功能的按钮
在需要打印表格的组件中,添加一个打印按钮:
<template>
<div>
<button @click="printTable">打印表格</button>
<!-- 表格代码 -->
<div id='my-table'>... </div>
</div>
</template>
4. 实现打印功能
在 methods 中定义打印函数 printTable,调用 $print 方法实现打印
methods: {
printTable () {
this.$print({
// 需要打印的元素的选择器
printable: '#my-table',
// 打印时的页面标题
pageTitle: '我的表格',
// 是否显示打印对话框
showPrintDialog: true
})
}
}
需要注意的是:确保设备连接了打印机。
指令方式 v-print 参考官网的api使用,官网地址放在下方链接。