Vue项目实现web端打印页面

一、封装一个print.js文件，放在目录/utils下

// print.js

export function clear () {
  const iframes = document.body.querySelectorAll('iframe.print-iframe')
  iframes.forEach(iframe => {
    document.body.removeChild(iframe)
  })
}

export function print (el) {
  // 清除旧iframe
  clear()
  // 创建用于打印的iframe
  const iframeId = 'print-' + Date.now()
  const iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;'
  const iframe = document.createElement('iframe')
  iframe.attributes.style = iframeStyle
  iframe.className = 'print-iframe'
  iframe.id = iframeId
  document.body.appendChild(iframe)
  // 写入内容
  const iframeWindow = iframe.contentWindow
  const iframeDocument = iframeWindow.document
  // document.querySelectorAll('link').filter(link => link.attributes === 'style')
  iframeDocument.write(`<div class="${el.className}">${el.innerHTML}</div>`)
  // 打印
  iframeDocument.close()
  iframeWindow.close()
  iframeWindow.focus()
  iframeWindow.print()
}

二、引入使用

1.引入

import { print } from '@/utils/print.js'

2.使用

const el = document.getElementById("domId")  // domId-元素id

print(el)  // el为要打印内容的最外层元素

记录于2022-2-25