vue实现打印功能_vue: 实现打印前端功能打印(可自定义区域)

打印功能可以自己使用原生js（window.print()）实现，其次就是使用插件，介绍两个打印插件

一、vue-print-nb：这个插件使用起来便捷，用法如下

1.安装

npm install vue-print-nb --save
1

2.在main.js文件中注册使用

import Print from 'vue-print-nb'
Vue.use(Print);
1
2

3.具体使用方法：（1）直接绑定id方法 （2）绑定对象方法

<!--直接绑定id方法-->
<div id='box'>
   <p>打印内容</p>
   <p>打印内容1111</p>
</div>
<div v-print='#box'>打印</div>

<!--直接绑定对象方法-->
<div id='box'>
   <p>打印内容</p>
   <p>打印内容1111</p>
</div>
<div v-print='printObj'>打印</div>

export default{
   data(){
      return {
         printObj:{
            id:'box',
            //其他配置项，
         }
      }
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

坑点：（1）无法打印本地图片，当需要打印的部分有本地图片时，打印