window.print() 动态打印及封装, vue-print-nb

方法一：   直接创建方法

doPrint() {

      //判断iframe是否存在，不存在则创建iframe

      var iframe = document.getElementById('print-iframe');

      if (!iframe) {

        var el = document.getElementById('basicPage');

        iframe = document.createElement('IFRAME');

        var doc = null;

        iframe.setAttribute('id', 'print-iframe');

        iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');

        document.body.appendChild(iframe);

        doc = iframe.contentWindow.document;

        doc.write('<style media="print">@page {size: auto;margin: 0mm;}</style>'); //解决出现页眉页脚和路径的问题

        doc.write('<div>' + el.innerHTML + '</div>');

        doc.close();

        iframe.contentWindow.focus();

      }

      setTimeout(function () {

        iframe.contentWindow.print();

      }, 50); //解决第一次样式不生效的问题

      if (navigator.userAgent.indexOf('MSIE') > 0) {

        document.body.removeChild(iframe);

      }

    },

方法二：封装js

1：创建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)
    })
  })
}

2:引用

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

3：调用

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

方法三：引入vue-print-nb

在main.js引入

// 引入打印插件
import Print from 'vue-print-nb'

Vue.use(Print)

在使用页面直接调用：

 <div><el-button v-print="'#table-container'">打印</el-button></div>

<div class="el-table-container">

哈哈哈

</div>