DOM元素打印(Window.print)

DOM元素打印(Window.print)

/**
 *
 * @param parentDom 被打印Dom的父dom元素/父元素id
 * @param title 页眉标题
 * @param zoom 缩放比例
 * @param rotate 旋转角度
 */
export function printDom({ parentDom, title = '', zoom = 0.5, rotate = 0 }) {
  try {
    // 获取打印DOM
    if (typeof dom === 'string') {
      parentDom = document.getElementById(parentDom)
    }
    // 当前页面样式
    var headDom = document.getElementsByTagName('head')[0]
    // 创建iframe
    var iframe = document.createElement('iframe')
    // 设置iframe样式
    iframe.setAttribute(
      'style',
      'position:absolute;width:0px;height:0px;left:-500px;top:-500px;'
    )
    // 在页面插入iframe
    var f = document.body.appendChild(iframe)
    // 获取iframe内的html
    var w = f.contentWindow || f.contentDocument
    var doc = f.contentDocument || f.contentWindow.document
    // 经需要打印的DOM插入iframe
    var printMain = document.createElement('div')
    printMain.setAttribute(
      'style',
      `size: A4 portrait;zoom: ${zoom};transform:rotate(${rotate}deg);`
    )
    printMain.innerHTML = parentDom.innerHTML
    doc.body.appendChild(printMain)
    // 设置iframe内的header，添加样式文件
    var head = doc.getElementsByTagName('head')[0]
    head.innerHTML = headDom.innerHTML
    head.getElementsByTagName('title')[0].innerHTML = title
    // 关闭iframe
    doc.close()
    // 使iframe失去焦点
    w.focus()
    // 调用iframe的打印方法
    setTimeout(() => {
      w.print()
      // 移除iframe
      w.close()
      document.body.removeChild(iframe)
    }, 1000)
  } catch (e) {
    console.log(e)
    this.$message.error(e)
  }
}