浏览器打印相关深入

现在做一家宠物sass行业，公司产品打印需要实现动态表头表尾功能，这个实际上并不是很麻烦，现在学习到了一些新的技术方案，在此记录一下。
首先聊一聊打印吧
浏览器提供方法 window.print()
这个方法只针对于整个页面，这时候延伸出第一个问题，如何打印制定页面内容。这个市面上用的比较多的就是动态创建iframe把需要打印的内容添加到这个iframe里面，调用iframe内部的window.print() 实现打印。
这里有一些需要注意的地方
input textarea select 这几个东西是绑定value的 需要转换成innerHTML进行打印
我们可以把这些封装成一个方法,挂载到vue的实例上,可以在添加一些参数options，以下是方法源码

// 使用方式
// this.$print(this.$refs[value], options)
// options 参数 noPrint 不打印的元素
//             iframeStyle  可以从写打印样式
// 未来添加表头 表尾 标识      剪裁表头表尾

// 打印类属性、方法定义
const Print = function (dom, options) {
    if (!(this instanceof Print)) return new Print(dom, options);
  
    this.options = this.extend({
      'noPrint': '.no-print',
      "iframeStyle": "",
      "noRecursion": true
    }, options);
  
    if ((typeof dom) === "string") {
      this.dom = document.querySelector(dom);
    } else {
      this.isDOM(dom)
      this.dom = this.isDOM(dom) ? dom : dom.$el;
    }
  
    this.init();
  };
  Print.prototype = {
    init: function () {
      var content = this.getStyle() + this.getHtml();
      this.writeIframe(content);
    },
    extend: function (obj, obj2) {
      for (var k in obj2) {
        obj[k] = obj2[k];
      }
      return obj;
    },
  
    getStyle: function () {
      var str = "",
        styles = document.querySelectorAll('style,link');
      for (var i = 0; i < styles.length; i++) {
        str += styles[i].outerHTML;
      }
      
      if (this.options.iframeStyle) {
        str += "<style>" + this.options.iframeStyle + "</style>"
      }

      str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
  
      return str;
    },
  
    getHtml: function () {
      var inputs = document.querySelectorAll('input');
      var textareas = document.querySelectorAll('textarea');
      var selects = document.querySelectorAll('select');
  
      for (var k = 0; k < inputs.length; k++) {
        if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
          if (inputs[k].checked == true) {
            inputs[k].setAttribute('checked', "checked")
          } else {
            inputs[k].removeAttribute('checked')
          }
        } else if (inputs[k].type == "text") {
          inputs[k].setAttribute('value', inputs[k].value)
        } else {
          inputs[k].setAttribute('value', inputs[k].value)
        }
      }
  
      for (var k2 = 0; k2 < textareas.length; k2++) {
        if (textareas[k2].type == 'textarea') {
          textareas[k2].innerHTML = textareas[k2].value
        }
      }
  
      for (var k3 = 0; k3 < selects.length; k3++) {
        if (selects[k3].type == 'select-one') {
          var child = selects[k3].children;
          for (var i in child) {
            if (child[i].tagName == 'OPTION') {
              if (child[i].selected == true) {
                child[i].setAttribute('selected', "selected")
              } else {
                child[i].removeAttribute('selected')
              }
            }
          }
        }
      }
      let outerHTML = this.wrapperRefDom(this.dom).outerHTML
      return outerHTML;
    },
    wrapperRefDom: function (refDom) {
      let prevDom = null
      let currDom = refDom
      if(this.options.noRecursion) {
        return currDom
      }
      if (!this.isInBody(currDom)) return currDom
  
      while (currDom) {
        if (prevDom) {
          let element = currDom.cloneNode(false)
          element.appendChild(prevDom)
          prevDom = element
        } else {
          prevDom = currDom.cloneNode(true)
        }
  
        currDom = currDom.parentElement
      }
  
      return prevDom
    },
  
    writeIframe: function (content) {
      var w, doc, iframe = document.createElement('iframe'),
        f = document.body.appendChild(iframe);
      iframe.id = "myIframe";
      //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
      iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
      w = f.contentWindow || f.contentDocument;
      doc = f.contentDocument || f.contentWindow.document;
      doc.open();
      doc.write(content);
      doc.close();
      var _this = this
      // 是Safari 打印走这个逻辑
      if ((/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent))) {
        var _timer = setInterval(function() {
          if (doc.readyState == 'complete') {
           clearInterval(_timer); 
            _this.toPrint(w);
            setTimeout(function () {
              document.body.removeChild(iframe)
            }, 100)
          } 
         }, 1000);
      }else {
        iframe.onload = function() {
          _this.toPrint(w);
          setTimeout(function () {
            document.body.removeChild(iframe)
          }, 100)
        }
      }
    },
  
    toPrint: function (frameWindow) {
      try {
        setTimeout(function () {
          frameWindow.focus();
          try {
            if (!frameWindow.document.execCommand('print', false, null)) {
              frameWindow.print();
            }
          } catch (e) {
            frameWindow.print();
          }
          frameWindow.close();
        }, 10);
      } catch (err) {
        console.log('err', err);
      }
    },
    // 检查一个元素是否是 body 元素的后代元素且非 body 元素本身
    isInBody: function (node) {
      return (node === document.body) ? false : document.body.contains(node);
    },
    isDOM: (typeof HTMLElement === 'object') ?
      function (obj) {
        return obj instanceof HTMLElement;
      } :
      function (obj) {
        return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
      }
  };
  const MyPlugin = {}
  MyPlugin.install = function (Vue, options) {
    // 添加实例方法
    Vue.prototype.$print = Print
  }
  export default MyPlugin

这时候我们只是实现了一个最简单的打印部分内容。
继续延伸，去实现动态的表头和表尾。表头表尾，我们内部讨论过技术方案，最后定稿方案。
方案： 事先确定需要打印的是A4还是A5 横向还是纵向，因为他们尺寸都是固定的。如果是A4 横向，我们就这个尺寸去算出来这一页减去表头，表尾里面可以放下多少内容，然后在把内容追加到指定的页就ok啦。
技术细节: 首先把需要做分页的内容外层设置为 position: absolute; z-index: -1，再把需要分页的内容统一添加一个class，等页面渲染完成之后，获取到所有有这个class的元素，并且拿到他们的height，根据height，动态追加到不同的页里面去。部分代码如下

    <div ref="printBox" class="record">
      <div class="preview" v-for="(it, i) in pageArr" :key="i">
        <div class="preview-con recordImg" ref="print">
          <div class="header">
            <img :src="logo" alt="" v-if="logo">
            <div style="text-align: center">
              <p class="tit">{{ userInfo.tenant_name }}</p>
              <p class="tit">{{ disposalPrintA4.typeItem == '影像' ? XlightInfo.lv2_category_id == 599 ? '' : XlightInfo.lv2_category_name  : disposalPrintA4.typeItem }}检查报告单</p>
            </div>
            <div class="medical">
              <!-- <p @click="toPrint" v-if="i === 0" class="print-btn">打印</p> -->
              <p class="number">病历号：<span>{{ customerInfo.pet.medical_record_no }}</span></p>
            </div>
          </div>
          <section class="main" v-html="it"></section>
          <div class="footer">
            <div class="footer-left">
              <div>
                <span>检查时间：{{ formatDate(inspec_time) }}</span>
                <span v-if="disposalPrintA4.typeItem != '化验'">申请医生：{{ apply_user_name }}</span>
                <span>检查医生：{{ inspect_user_name }}</span>
              </div>
              <div>备注：报告为此次检查记录，结果仅供临床参考</div>
            </div>
            <div>- 第<span>{{ i + 1 }}</span>页 共 <span>{{ pageArr.length }}</span> 页 -</div>
          </div>
        </div>
      </div>
    </div>

async mounted() {
    this.$nextTick(() => {
      let heightArr = []
      let totalHeight = 0
      let rowIndexArr = [0]
      let eleArr = document.getElementsByClassName('row-auto-paging')
      for (let i = 0; i < eleArr.length; i++) {
        heightArr.push(eleArr[i].clientHeight)
      }

      for (let i = 0; i < heightArr.length; i++) {
        totalHeight += heightArr[i]
        if (totalHeight > 833) {
          rowIndexArr.push(i)
          // 超过当前页 heightArr[i] 表示下页第一条数据高度
          totalHeight = heightArr[i]
        }
      }
      let classArr = []
      for (let i = 0; i < rowIndexArr.length; i++) {
        // slice截取 [rowIndexArr[i], rowIndexArr[i + 1]) 包括左侧不包括右侧
        classArr = Array.from(eleArr).slice(rowIndexArr[i], rowIndexArr[i + 1])
        let eleStr = '' // 元素节点字符串
        for (let index = 0; index < classArr.length; index++) {
          eleStr += classArr[index].outerHTML
        }
        this.pageArr.push(eleStr)
      }
      // 判断是否导出打印
      if (!this.isExport && !this.isView) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.$print(this.$refs.printBox)
          }, 1000)
        })
      }
    })
  }

这样做可以实现需求，但是有一些弊端，需要事先知道打印的是A4 或者是A5 但是浏览器选择的纸张大小，是浏览器弹出来的，最后选择什么，实际上代码也不知道，如果不按照之前设想的方式打印，就会导致表头表尾位置不对。

image.png

24年2月1号 看到了一些关于浏览器的打印的新东西
我们可以设置浏览器打印弹框里面的A4 A5 横向 纵向等功能。

@page {
  margin: 0mm;
  /* 纵向 */
  size: A5 landscape;

  /* 横向 */
  /* size: landscape; */
  /* 边距 上右下左 */
  /* margin: 1cm 2cm 1cm 2cm; */
}

 .page-break {
    page-break-after: always;
}

@page size 可以设置纸张和横向还是纵向 margin:0mm；调整A4 A5会无效
添加page-break的class (page-break-after: always) 会独自生成一页
官方文档 https://developer.mozilla.org/en-US/docs/Web/CSS/@page

image.png
image.png