JavaScript丨打印指定 DOM 节点

打印指定 DOM 节点

使用时直接调用此函数，最后几行图片相关代码根据实际需求修改

/**
 * @param {Element} dom 节点
 * @param {String} title 标题
 * @param {String} specialStyle CSS选择器，打印保留样式
 */
function printPartial(dom, title = document.title, specialStyle = '') {
  if (!dom) return
  let copyDom = document.createElement('span')
  const styleDom = document.querySelectorAll('style')
  const titleDom = document.createElement('title')
  titleDom.innerText = title
  copyDom.appendChild(titleDom)
  Array.from(styleDom).forEach((item) => {
    if (
      item.childNodes.length > 0 &&
      item.childNodes[0].nodeValue.indexOf(specialStyle) !== -1
    ) {
      copyDom.appendChild(item.cloneNode(true))
    }
  })
  copyDom.appendChild(dom.cloneNode(true))
  const htmlTemp = copyDom.innerHTML
  copyDom = null
  const iframeDom = document.createElement('iframe')

  // 隐藏 iframe
  const attrObj = {
    height: 0,
    width: 0,
    border: 0,
    wmode: 'Opaque'
  }
  const styleObj = {
    display: 'none'
  }
  Object.entries(attrObj).forEach(([key, value]) =>
    iframeDom.setAttribute(key, value)
  )
  Object.entries(styleObj).forEach(([key, value]) => {
    iframeDom.style[key] = value
  })
  document.body.insertBefore(iframeDom, document.body.children[0])
  const iframeWin = iframeDom.contentWindow
  const iframeDocs = iframeWin.document
  iframeDocs.body.innerHTML = htmlTemp

  // 多页打印
  iframeDocs
    .getElementsByTagName('body')[0]
    .setAttribute('style', 'overflow: visible!important; margin: 0')

  // 如有图片需等待图片加载完成
  const img = iframeDocs.body.getElementsByClassName('img')[0]
  if (img) {
    img.onload = function () {
      iframeWin.focus()
      iframeWin.print()
    }
  } else {
    iframeWin.focus()
    iframeWin.print()
  }
}