vue-print-nb 打印

安装vue-print-nb依赖

npm install vue-print-nb --save

使用

<div>
      <div id="printTest"  v-for="(item, index) in list" >
          <div v-if="index!==0" style="page-break-after:always"></div><!-- 强制分页 -->
          <p>打印的内容</p>
      </div>
</div> 
<button v-print="'printObj'">打印</button> 
<script>
data() {
    return {
          printObj: {//打印
            id: "printTest",
            popTitle: "标题",
            extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
            openCallback (vue) {},
            closeCallback (vue) {},
      },
</script>

强制分页

<div style="page-break-after:always"></div>

多页显示时，对象被分割问题，解决方法

打印或生成pdf时，分页时候会遇到图片或文字被拆分到2个页面的问题。解决思路，当dom内容已超出a4的高度，则将该dom前插入一个空dom，把他挤下去，分割

paging(childNodes){
    let doc=document;
    let ST = doc.documentElement.scrollTop || doc.body.scrollTop; 
    let SL = doc.documentElement.scrollLeft || doc.body.scrollLeft;
    doc.documentElement.scrollTop = 0;doc.documentElement.scrollLeft = 0;
    doc.body.scrollTop = 0;doc.body.scrollLeft = 0;
    let pageHeight = A4_HEIGHT;
    let lableListID = childNodes;
    
    for (let i = 0; i < lableListID.length; i++) {
      let multiple = Math.ceil((lableListID[i].offsetTop + lableListID[i].offsetHeight) / pageHeight);
      if (this.isSplit(lableListID, i, multiple * pageHeight)) {
          let divParent = lableListID[i].parentNode; // 获取该div的父节点
          let newNode = document.createElement('div');
          newNode.className = 'emptyDiv';
          newNode.style.background = '#ffffff';
          let _H = multiple * pageHeight - (lableListID[i].offsetTop + lableListID[i].offsetHeight);
          newNode.style.height = _H  +1+ 'px';//留白
          newNode.style.width = '100%';
          let next = lableListID[i].nextSibling; // 获取div的下一个同级节点
          if (next) {// 判断同级节点是否存在
            // 存在则将新节点插入到div的下一个同级节点前
            divParent.insertBefore(newNode, next);
          }else{
            // 不存在则直接添加到最后
            divParent.appendChild(newNode);
          }
        }
      }
  },
  isSplit (nodes, index, pageHeight) {
    // 计算当前这块dom是否跨越了a4大小，以此分割
    if (nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop +           nodes[index + 1].offsetHeight > pageHeight) {
      // console.info(nodes[index])
      return true;
    }
    return false;
  },