Vue中使用vue-print-nb插件
安装
1
2
3
4
5
| // Vue2版本安装
npm install vue-print-nb --save
// Vue3版本安装
npm install vue3-print-nb --save
|
引入包
Vue2引入方式：
1
2
3
4
5
6
7
8
9
10
|
// 1. 全局挂载
import Print from 'vue-print-nb'
Vue.use(Print)
// 2. 自定义指令
import print from 'vue-print-nb'
directives: {
print
}
|
Vue3引入方式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| // 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
}
|
使用
在打印页面时，不要使用 v-if 的判断元素，因为 v-if 是不渲染dom节点的，会导致打印的页面不全，可以使用 v-show 代替。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <el-button v-print="printObj" v-waves size="small" type="primary" icon="el-icon-printer">打印</el-button>
<el-table id="printList">
print me
</el-table>
data() {
return {
...
printObj: { // 打印对象
id: 'printList', // 要打印元素的id
popTitle: '打印文档标题', // 不填的话会出现undefind字样
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
}
}
},
|
API
可以去github去查看APi GitHub地址