Vue -print - nb 打印插件 使用详解 以及连打操作

#安装

npm install vue-print-nb --save

#在main.js 全局引用

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

#页面中使用

   打印

v-print="’#dayin’" 用div 给个区域就可以打印页面区域 v-print="’#dayin’"
是v-print ="’#id’” 参数为需要打印局部的盒子标识.

// 源码

// An highlighted block
/**
 * @file 打印
 * 指令`v-print`,默认打印整个窗口
 * 传入参数`v-print="'#id'"` , 参数为需要打印局部的盒子标识.
 */

/* harmony default export */ var print = ({
     
  directiveName: 'print',
  bind: function bind(el, binding, vnode) {
     
    var vue = vnode.context;
    var closeBtn = true;
    var id = '';
    el.addEventListener('click', function () {
     
      vue.$nextTick(function () {
     
        if (typeof binding.value === 'string') {
     
          id = binding.value;
        } else if (_typeof(binding.value) === 'object' && !!binding.value.id) {
     
          id = binding.value.id;
          var ids = id.replace(new RegExp("#", "g"), '');
          var elsdom = document.getElementById(ids);
          if (!elsdom) console.log("id in Error"), id = '';
        } // 局部打印


        if (id) {
     
          localPrint();
        } else {
     
          // 直接全局打印
          window.print();
        }
      });
    });

    var localPrint = function localPrint() {
     
      if (closeBtn) {
     
        closeBtn = false;
        new printarea_default({
     
          ids: id,
          // * 局部打印必传入id
          standard: '',
          // 文档类型，默认是html5，可选 html5，loose，strict
          extraHead: binding.value.extraHead,
          // 附加在head标签上的额外标签,使用逗号分隔
          extraCss: binding.value.extraCss,
          // 额外的css连接，多个逗号分开
          popTitle: binding.value.popTitle,
          // title的标题
          endCallback: function endCallback() {
     
            // 调用打印之后的回调事件
            closeBtn = true;
          }
        });
      }
    };
  }
});
// CONCATENATED MODULE: ./src/index.js


print.install = function (Vue) {
     
  Vue.directive('print', print);
};

vue - print -nb API
id：*必填部分打印输入的ID
standard：文档类型，默认是HTML5，可选html5，loose，strict
extraHead：附加在head标签上的其他标签，以逗号分隔
extraCss：附加链接连接，以逗号分隔
popTitle：标题显示标题
endCallback()：打印后的回调事件

#实现页面连打功能

连打主要是产生多个div，形成连打，以数据为例，我选几条数据就打几条
首先要先取得要打印的数据，放到一个集合中

// 生成动态的div

        

        //div 可以根据对象取到对应打印的数据就可以

做成一个动态的div 根据集合的数据的长度，生成对应多个div

 // 打印操作，生成divID
    gennerateId:function (index) {
      return "printDiv"+index
    },

在div上加上强制换页就可以，默认一个div 一个打印页 这样你打印的时候就会同时生成多个打印id 就可以连打了，只要自己控制样式就