js 实现页面局部打印

页面局部打印（不需要打印的部分加类名no-print）

参考github

const print = {
  iframe: null,
  init() {
    if (!this.iframe) {
      this.iframe = document.createElement('iframe')
      this.iframe.width = '100%'
      this.iframe.style.border = 'none'
      this.iframe.style.display = 'none'
      this.iframe.id = '#printId'
      document.body.appendChild(this.iframe)
    }
    var iframeDoc = this.iframe.contentDocument || this.iframe.contentWindow.document
    return iframeDoc
  },
  print(elements) {
    var style = this.getStyle()
    var element = this.getHtmls(elements)
    
    var that = this
    if (this.isIE()) {
      var newWin = window.open('', '打印', 'height=978,scrollbars=yes')
      newWin.document.write(style + element)
      newWin.document.close()
      newWin.location.reload()
      newWin.print()
    } else {
      var iframeDoc = this.init()
      iframeDoc.open()
      iframeDoc.write(style + element)
      iframeDoc.close()
      if (this.iframe.attachEvent) {
        this.iframe.attachEvent('onload', function() {
          that.iframe.contentWindow.print()
        })
      } else {
        this.iframe.onload = function() {
          that.iframe.contentWindow.print()
        }
      }
    }
  },
  getHtmls(elements) {
    if (elements) {
      var canvasList = document.querySelectorAll('canvas')
      for (var index = 0; index < canvasList.length; index++) {
        var element = canvasList[index];
        var url = element.toDataURL('image/png')
        var img = document.createElement('img')
        img.src = url
        img.setAttribute('style', 'width: 100%; height: 100%;')
        element.parentNode.insertBefore(img, element)
      }

      var div = document.createElement('div')
      var copyElement = elements.cloneNode(true)
      for (var index = 0; index < canvasList.length; index++) {
        var element = canvasList[index]
        element.parentNode.removeChild(element.previousSibling)
      }
      console.log(elements)

      copyElement.style.width = '650px'
      copyElement.style.marginLeft = 'auto'
      copyElement.style.marginRight = 'auto'
      
      copyElement.className = copyElement.className + " print-html"
      div.appendChild(copyElement)

      return div.outerHTML
    }
    return ''
  },
  getStyle() {
    const styleList = document.querySelectorAll('style, link')
    let styleStr = ''
    styleList.forEach(item => {
      styleStr += item.outerHTML
    })
    // @page { margin: 0; } 去掉页眉页脚
    const noPrint = '<style>@page { margin: 0; } .#printId { border: none }.no-print{ display: none }</style>'
    return styleStr + noPrint
  },
  isIE: function() {
    return navigator.userAgent.toLowerCase().indexOf('trident') > -1
  }
}

export default print

示例：

vue中使用
在不需要打印的标签上加类名 no-print

<template>
  <!-- 要打印的内容 -->
  <div ref="printRef">
    <div>
      <button class="no-print" @click="handlePrint">打印</button>
      <div class="no-print">不要打印我</div>
      <div>打印内容......</div>
    </div>
  </div>
</template>

<script>
import $print from '@/utils/print'
export default {
  methods: {
    handlePrint() {
      $print.print(this.$refs.printRef)
    }
  }
}
</script>