前端开发之打印功的使用和实例（vue-print-nb）

通过插件来进行实现

前言
效果图
1、安装插件
- vue2
- vue3
2、引入Vue项目
2、使用
- 2.1、在项目中创建按钮并且使用v-print绑定绑定打印事件
- 2.2、编写要打印的内容，给内容附加唯一的id
- 2.3、绑定的时间的方法和参数
3、整体代码（此代码是通过vue3来进行实现的但是逻辑都是一样的）

前言

在平时开发中打印功能是很常见的功能，实现的方式也有很多，下面讲解通过插件来进行实现的方式

该插件是通过节点进行打印可以实现分开打印不同的内容
注意：vue2和vue3安装的版本是不同的

效果图

在这里插入图片描述

1、安装插件

vue2

npm install vue-print-nb --save

vue3

npm install vue3-print-nb --save

2、引入Vue项目

在main文件中引用依赖

vue2
import Print from ‘vue-print-nb’;
Vue.use(Print);
vue3
import print from ‘vue3-print-nb’
Vue.use(Print);

在这里插入图片描述

2、使用

2.1、在项目中创建按钮并且使用v-print绑定绑定打印事件

在这里插入图片描述

2.2、编写要打印的内容，给内容附加唯一的id

在这里插入图片描述

2.3、绑定的时间的方法和参数

在这里插入图片描述

const print = ref({id: 'vab-print-image', // 这里的id就是上面我们的打印区域id，实现指哪打哪popTitle: '配置页眉标题', // 打印配置页上方的标题extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割preview: false, // 是否启动预览模式，默认是falsepreviewTitle: '预览的标题', // 打印预览的标题previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高previewBeforeOpenCallback () { console.log('正在加载预览窗口！') }, // 预览窗口打开之前的callbackpreviewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callbackbeforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callbackopenCallback () { console.log('执行