vue实现报表打印

使用Vue实现报表打印功能

在Vue项目中实现报表打印功能，可以通过以下几种方法实现：

方法一：使用window.print()原生打印

创建一个隐藏的打印区域，通过CSS控制打印样式，调用浏览器原生打印功能。

<template>
  <div>
    <button @click="printReport">打印报表</button>
    <div class="print-area" ref="printContent">
      <!-- 报表内容 -->
      <h1>销售报表</h1>
      <table>
        <!-- 表格数据 -->
      </table>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    printReport() {
      const printContent = this.$refs.printContent.innerHTML
      const originalContent = document.body.innerHTML
      document.body.innerHTML = printContent
      window.print()
      document.body.innerHTML = originalContent
    }
  }
}
</script>

<style>
@media print {
  body * {
    visibility: hidden;
  }
  .print-area, .print-area * {
    visibility: visible;
  }
  .print-area {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>

方法二：使用vue-print-nb插件

安装vue-print-nb插件可以更简单地实现打印功能。

npm install vue-print-nb --save

在Vue项目中使用：

import Print from 'vue-print-nb'
Vue.use(Print)

<template>
  <div>
    <button v-print="printObj">打印报表</button>
    <div id="printContent">
      <!-- 报表内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      printObj: {
        id: 'printContent',
        popTitle: '销售报表'
      }
    }
  }
}
</script>

方法三：使用html2canvas和jsPDF生成PDF

对于需要生成PDF格式的报表，可以使用html2canvas和jsPDF库。

npm install html2canvas jspdf --save

实现代码：

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

<template>
  <div>
    <button @click="exportToPDF">导出PDF</button>
    <div ref="pdfContent">
      <!-- 报表内容 -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    exportToPDF() {
      html2canvas(this.$refs.pdfContent).then(canvas => {
        const imgData = canvas.toDataURL('image/png')
        const pdf = new jsPDF('p', 'mm', 'a4')
        const imgWidth = 190
        const pageHeight = 277
        const imgHeight = canvas.height * imgWidth / canvas.width
        let heightLeft = imgHeight
        let position = 10

        pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight)
        heightLeft -= pageHeight

        while (heightLeft >= 0) {
          position = heightLeft - imgHeight
          pdf.addPage()
          pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight)
          heightLeft -= pageHeight
        }

        pdf.save('report.pdf')
      })
    }
  }
}
</script>

优化打印样式的CSS技巧

@media print {
  @page {
    size: A4;
    margin: 0;
  }
  body {
    margin: 1.6cm;
  }
  .no-print {
    display: none !important;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #000;
    padding: 8px;
  }
}

以上方法可以根据具体需求选择使用，原生打印适合简单报表，插件方式更便捷，而PDF导出适合需要保存电子文档的场景。