vue项目打印内容

vue文件

<template>
  <div id="printBox" v-show="showPreview">
    <table border="1" style="border-collapse:collapse;width: 100%;margin: 0 auto;font-size: 12px;font-weight:400; table-layout:fixed;color: #000;">
      // tr,td原生内容
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showPreview: false,
    }
  },
  methods: {
    show(item) {
      console.log('传过来的数据', item)
      this.$nextTick(() => {
        let newstr = document.getElementById('printBox').innerHTML
        var wind = window.open(
          '',
          'newwindow',
          'height=300, width=700, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no'
        )
        wind.document.body.innerHTML = newstr
        wind.document.head.innerHTML = `
          <title>${'自定义的title'}</title>
          <style type="text/css" media="print">@page { margin: 15px auto; }</style>
        `
        // wind.document.title = this.invoiceInfo.companyTitle + this.invoiceInfo.createTimeText
        wind.print()
      })
    },
  },
}
</script>

如果需要设置新页面的innerHTML 可以使用下面注销的那一句话
但是下面那句话在打印的时候会打印页脚和页眉, 如果不要打印页脚页眉需要塞入style样式