現(xiàn)在做一家寵物sass行業(yè)，公司產(chǎn)品打印需要實(shí)現(xiàn)動(dòng)態(tài)表頭表尾功能，這個(gè)實(shí)際上并不是很麻煩，現(xiàn)在學(xué)習(xí)到了一些新的技術(shù)方案，在此記錄一下。
首先聊一聊打印吧
瀏覽器提供方法 window.print()
這個(gè)方法只針對(duì)于整個(gè)頁面，這時(shí)候延伸出第一個(gè)問題，如何打印制定頁面內(nèi)容。這個(gè)市面上用的比較多的就是動(dòng)態(tài)創(chuàng)建iframe把需要打印的內(nèi)容添加到這個(gè)iframe里面，調(diào)用iframe內(nèi)部的window.print() 實(shí)現(xiàn)打印。
這里有一些需要注意的地方
input textarea select 這幾個(gè)東西是綁定value的 需要轉(zhuǎn)換成innerHTML進(jìn)行打印
我們可以把這些封裝成一個(gè)方法,掛載到vue的實(shí)例上,可以在添加一些參數(shù)options，以下是方法源碼

// 使用方式
// this.$print(this.$refs[value], options)
// options 參數(shù) noPrint 不打印的元素
//             iframeStyle  可以從寫打印樣式
// 未來添加表頭 表尾 標(biāo)識(shí)      剪裁表頭表尾

// 打印類屬性、方法定義
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 打印走這個(gè)邏輯
      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);
      }
    },
    // 檢查一個(gè)元素是否是 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) {
    // 添加實(shí)例方法
    Vue.prototype.$print = Print
  }
  export default MyPlugin

這時(shí)候我們只是實(shí)現(xiàn)了一個(gè)最簡單的打印部分內(nèi)容。
繼續(xù)延伸，去實(shí)現(xiàn)動(dòng)態(tài)的表頭和表尾。表頭表尾，我們內(nèi)部討論過技術(shù)方案，最后定稿方案。
方案： 事先確定需要打印的是A4還是A5 橫向還是縱向，因?yàn)樗麄兂叽缍际枪潭ǖ?。如果是A4 橫向，我們就這個(gè)尺寸去算出來這一頁減去表頭，表尾里面可以放下多少內(nèi)容，然后在把內(nèi)容追加到指定的頁就ok啦。
技術(shù)細(xì)節(jié): 首先把需要做分頁的內(nèi)容外層設(shè)置為 position: absolute; z-index: -1，再把需要分頁的內(nèi)容統(tǒng)一添加一個(gè)class，等頁面渲染完成之后，獲取到所有有這個(gè)class的元素，并且拿到他們的height，根據(jù)height，動(dòng)態(tài)追加到不同的頁里面去。部分代碼如下

    <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 }}檢查報(bào)告單</p>
            </div>
            <div class="medical">
              <!-- <p @click="toPrint" v-if="i === 0" class="print-btn">打印</p> -->
              <p class="number">病歷號(hào)：<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>檢查時(shí)間：{{ formatDate(inspec_time) }}</span>
                <span v-if="disposalPrintA4.typeItem != '化驗(yàn)'">申請(qǐng)醫(yī)生：{{ apply_user_name }}</span>
                <span>檢查醫(yī)生：{{ inspect_user_name }}</span>
              </div>
              <div>備注：報(bào)告為此次檢查記錄，結(jié)果僅供臨床參考</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)
          // 超過當(dāng)前頁 heightArr[i] 表示下頁第一條數(shù)據(jù)高度
          totalHeight = heightArr[i]
        }
      }
      let classArr = []
      for (let i = 0; i < rowIndexArr.length; i++) {
        // slice截取 [rowIndexArr[i], rowIndexArr[i + 1]) 包括左側(cè)不包括右側(cè)
        classArr = Array.from(eleArr).slice(rowIndexArr[i], rowIndexArr[i + 1])
        let eleStr = '' // 元素節(jié)點(diǎn)字符串
        for (let index = 0; index < classArr.length; index++) {
          eleStr += classArr[index].outerHTML
        }
        this.pageArr.push(eleStr)
      }
      // 判斷是否導(dǎo)出打印
      if (!this.isExport && !this.isView) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.$print(this.$refs.printBox)
          }, 1000)
        })
      }
    })
  }

這樣做可以實(shí)現(xiàn)需求，但是有一些弊端，需要事先知道打印的是A4 或者是A5 但是瀏覽器選擇的紙張大小，是瀏覽器彈出來的，最后選擇什么，實(shí)際上代碼也不知道，如果不按照之前設(shè)想的方式打印，就會(huì)導(dǎo)致表頭表尾位置不對(duì)。

image.png

24年2月1號(hào) 看到了一些關(guān)于瀏覽器的打印的新東西
我們可以設(shè)置瀏覽器打印彈框里面的A4 A5 橫向 縱向等功能。

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

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

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

@page size 可以設(shè)置紙張和橫向還是縱向 margin:0mm；調(diào)整A4 A5會(huì)無效
添加page-break的class (page-break-after: always) 會(huì)獨(dú)自生成一頁
官方文檔 https://developer.mozilla.org/en-US/docs/Web/CSS/@page

image.png

image.png