前端打印界面某个部分

1、window.print()

趋向于打印整个界面，且界面打印后需要重载原界面，否则原界面的所有事件将不再生效，打印方式简单

2、使用iframe进行截图打印

可以满足更加复杂的打印需求，且兼容IE9及以上浏览器及各大主流浏览器，打印完后不用刷新原浏览器界面

（1）安装html2canvas：npm i html2canvas --save

使用html2canvas插件将需要打印的html转化成canvas，再将canvas转为base64图片；

（2）动态创建iframe，将图片放入iframe中，打印iframe即可

此种方法既打印了我们所需要的html元素，保留了其样式，也无需刷新原浏览器界面。

/**
 * @function: 使用iframe打印指定html
 * @pramas: printDom: 打印的dom区域
**/

import html2canvas from 'html2canvas'
export function printHtml (printDom) {
  // html2canvas将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现
  html2canvas(printDom).then((canvas) => {
    const imgSrc = canvas.toDataURL('image/png') // 把canvas转为base64图片
    const iframe = document.createElement('IFRAME')
    iframe.setAttribute('style', 'width:0px;height:0px;') // 设置iframe不可见
    document.body.appendChild(iframe)
    const printObj = iframe.contentWindow
    const doc = printObj.document
    doc.open()
    // 将目标区域的html写入iframe
    doc.write(`<img id="imgDom" src="${imgSrc}" alt="">`)
    // 必须加上，不然ie没发调出打印的弹框,关闭iframe，释放内存，防止内存泄漏
    doc.close()
    // 样式插入进去
    const style = doc.createElement('style')
    style.innerText = '@media print{@page{size: auto A4 landscape;margin: 10pt 0;}}'
    doc.getElementsByTagName('head')[0].appendChild(style)
    setTimeout(() => {
      printObj.print()
      const iframeDom = document.body.getElementsByTagName('iframe')
      iframeDom.length > 0 && document.body.removeChild(iframeDom[0])
    }, 500)
  })
}