JavaScript 所见即所得局部打印

2023年7月19日

在开发打印相关业务时可能会需要打印页面部分内容，而原生并没有提供这样的方法。

下方是一个简单的局部打印方法，可以实现打印页面任何内容并保持样式。

原理就是复制需要打印的元素内容和样式创建临时打印页面进行打印。

JavaScript

const setStyle = function (element, style) {
  for (let i = 0; i < style.length; i++) {
    const key = style[i]
    element.style[key] = style[key]
  }
}
const copyStylesToClone = function (elA, elB) {
  const style = window.getComputedStyle(elA, null)
  setStyle(elB, style)
  for (let i = 0; i < elA.children.length; i++) {
    copyStylesToClone(elA.children[i], elB.children[i])
  }
}
const convertStyleObjectToString = function (style) {
  const el = document.createElement('div')
  for (const key in style) {
    el.style[key] = style[key]
  }
  return el.style.cssText
}
const convertStyleSheetToString = function (style) {
  let str = ''
  for (const key in style) {
    str += ''.concat(key, '{').concat(convertStyleObjectToString(style[key]), '}')
  }
  return str
}
export const printAsSeen = function (element, config) {
  if (!config) {
    config = {}
  }
  const data = element.cloneNode(true)
  copyStylesToClone(element, data)
  const iframe = document.createElement('iframe')
  iframe.style.display = 'none'
  document.body.after(iframe)
  const iframeInnerDocument = iframe.contentDocument
  const iframeInnerWindow = iframe.contentWindow
  const iframeInnerStyle = document.createElement('style')
  iframeInnerStyle.innerHTML += convertStyleSheetToString(config.style)
  iframeInnerDocument.body.append(data)
  iframeInnerDocument.head.append(iframeInnerStyle)
  iframeInnerWindow.print()
  setTimeout(function () {
    return iframe.remove()
  }, 10000)
}

展开

实际效果：（打印本页代码部分）