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

前言

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

该插件是通过节点进行打印可以实现分开打印不同的内容
注意：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, // 是否启动预览模式，默认是false
      previewTitle: '预览的标题', // 打印预览的标题
      previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
      zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
      previewBeforeOpenCallback () {
    console.log('正在加载预览窗口！') }, // 预览窗口打开之前的callback
      previewOpenCallback () {
    console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
      beforeOpenCallback () {
    console.log('开始打印之前！') }, // 开始打印之前的callback
      openCallback () {
    console.log('执行

原文地址：https://blog.csdn.net/m0_50207524/article/details/143835152

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！