解决windown.print()打印网页后，事件失效问题

使用windown.print()封装一个打印的工具函数

原本封装的print.js
export default function print() {
  // 打印功能
  const printDom = ref(null)  //要打印区域的id
  const printOut = dom => {
    const subOutputRankPrint = document.getElementById(printDom)
    console.log(subOutputRankPrint.innerHTML)
    const newContent = subOutputRankPrint.innerHTML
    const oldContent = document.body.innerHTML
    document.body.innerHTML = newContent
    window.print()
    window.location.reload()
    // document.body.innerHTML = oldContent
    return false
  }
  return {
    printDom,
    printOut
  }
}

直接在组件中导入printDom和printOut（）使用即可，但是有一个问题就是打印完成后，页面的事件会失效，需要刷新document.body.innerHTML = oldContent，页面的事件才会生效，这样用户体验感非常不好。

所以换一种思路，既然重新插入的innerHTML事件无效，那就把要打印的content.innerHTML不在放到document.body.innerHTML中，而是重新创建一个div用来存放要打印的innerHTML，并设置该div样式。打印完成后，移除掉添加的div即可。

export default function print() {
  const printDom = ref(null)
  const printOut = dom => {
    const subOutputRankPrint = document.getElementById(printDom)
    // 创建一个新的div
    const printDiv = document.createElement('div')
    printDiv.innerHTML = subOutputRankPrint.innerHTML
    printDiv.style.position = 'fixed'
    printDiv.style.left = '0'
    printDiv.style.top = '0'
    printDiv.style.width = '100%'
    printDiv.style.height = '100%'
    printDiv.style.zIndex = '999999'
    printDiv.style.background = '#fff'
    printDiv.style.overflow = 'auto'
    // 插入到网页中去
    document.body.appendChild(printDiv)
    window.print()
    document.body.removeChild(printDiv)
    return false
  }
  return {
    printDom,
    printOut
  }
}

效果完美实现，打印完成后，页面无需刷新，事件未失效。