前端直接打印html頁面vue版（封裝調用window.print()實現打印）

一.建立print.js，代碼封裝如下：

export default function printHtml(html) {
  const style = getStyle()
  const container = getContainer(html)

  document.body.appendChild(style)
  document.body.appendChild(container)

  getLoadPromise(container).then(() => {
    window.print()
    document.body.removeChild(style)
    document.body.removeChild(container)
  })
}

// 設置打印樣式
function getStyle() {
  const styleContent = `#print-container {
    display: none
}
@media print {
    body > :not(.print-container) {
        display: none
    }
    html,
    body {
        display: block !important;
    }
    #print-container {
        display: block
    }
    @page {
      margin: 0mm;
    }
}`
  const style = document.createElement('style')
  style.innerHTML = styleContent
  return style
}

// 清空打印內容
function cleanPrint() {
  const div = document.getElementById('print-container')
  if (div) {
    document.querySelector('body').removeChild(div)
  }
}

// 新建DOM，將需要打印的內容填充到DOM
function getContainer(html) {
  cleanPrint()
  const container = document.createElement('div')
  container.setAttribute('id', 'print-container')
  container.innerHTML = html
  return container
}

// 圖片完全加載后再調用打印方法
function getLoadPromise(dom) {
  let imgs = dom.querySelectorAll('img')
  imgs = [].slice.call(imgs)

  if (imgs.length === 0) {
    return Promise.resolve()
  }

  let finishedCount = 0
  return new Promise(resolve => {
    function check() {
      finishedCount++
      if (finishedCount === imgs.length) {
        resolve()
      }
    }
    imgs.forEach(img => {
      img.addEventListener('load', check)
      img.addEventListener('error', check)
    })
  })
}

二.在需要的頁面上調用print.js

import printHtml from '@/utils/print.js'

三.在按鈕點擊事件中調用打印即可

onPrint() {
      const printData = document.getElementById('printcontent').innerHTML
      printHtml(printData)
},