vue中打印指定dom元素

和window.print()效果一样，调出打印窗口，只是当前使用的插件是vue-print-nb

官网地址：vue-print-nb

vue2中使用

安装插件

npm install vue-print-nb --save
1

导入插件

import Print from 'vue-print-nb'
// 全局使用
Vue.use(Print);

//or

// 单个文件中引入指令
import print from 'vue-print-nb'

directives: {
    print   
}
1
2
3
4
5
6
7
8
9
10
11
12

vue3中使用

安装插件

npm install vue3-print-nb --save
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')

//or

// 局部
import print from 'vue3-print-nb'

directives: {
    print   
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用

<template>
     <div>              
        <el-button v-print="printObj">打印</el-button>
     </div>
     <div id="printContainer">
         打印内容区域，在指定打印区域内容的标签上绑定id
     </div>
</template>
<script>
export default {
	data() {
		return {
		      printObj: {
			       id: "printContainer", // 这里是要打印元素的id
			       popTitle: "卡", // 打印的标题
			       extraCss: "", // 打印可引入外部的一个 css 文件
			       extraHead: "", // 打印头部文字
			       beforeOpenCallback (vue) {
	            	 vue.printLoading = true
	            	 console.log('打开之前')
		          },
		          openCallback (vue) {
		             vue.printLoading = false
		             console.log('执行了打印')
		          },
		          closeCallback (vue) {
		             console.log('关闭了打印工具')
		          }
	            }
		      },
		    };
		}
	}
}
</script>
<style scoped>
@page {  
  /* 打印A4大小，不需要删除即可 */  
  size: auto A4 landscape;
  margin: 3mm;}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41