打印功能

<template>
  <div>
    <button @click="printArea">打印</button>
    <div ref="printArea" class="content-to-print">
      <h1>办案区使用情况登记表</h1>
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>联系方式</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>兰清</td>
            <td>未知</td>
            <td>无</td>
            <td>343036478e242107b</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';

export default {
  methods: {
    async printArea() {
      const element = this.$refs.printArea; // 获取要打印的元素
      const canvas = await html2canvas(element);
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF();
      const imgProps = pdf.getImageProperties(imgData);
      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

      pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
      pdf.save('print-output.pdf');
    }
  }
};
</script>

<style scoped lang="less">
.content-to-print {
  table {
    border-collapse: collapse;
    width: 50%;
    margin: auto;
    font-family: "微软雅黑", sans-serif;
  }

  th,
  td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  th {
    background-color: #4CAF50;
    color: white;
  }
}
</style>