Vue3 打印表格：使用 html2canvas 和 jsPDF 实现本地打印

要实现利用本地打印机对整页表格的打印，可以按照以下步骤进行：

1. 安装必要的依赖：

npm install --save html2canvas
npm install --save jspdf

2. 在需要打印的页面引入依赖：

<template>
  <div>
    <el-button @click="print">打印</el-button>
    <div id="print-area">
      <!-- 表格内容 -->
    </div>
  </div>
</template>
<script>
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
export default {
methods: {
async print() {
// 获取打印区域的DOM元素
const printArea = document.getElementById('print-area')
// 使用html2canvas将DOM元素转换为canvas
const canvas = await html2canvas(printArea)
// 使用jsPDF创建PDF对象
const pdf = new jsPDF('p', 'mm', 'a4')
// 获取canvas的图像数据
const imgData = canvas.toDataURL('image/png')
// 将图像数据添加到PDF中
pdf.addImage(imgData, 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight())
// 保存PDF并使用本地打印机打印
pdf.save('print.pdf')
}
}
}
</script>

3. 修改模版中的表格内容，确保被打印的区域有一个唯一的 id（例如上面的`print-area`），这个 id 在方法中会用到。

以上代码使用了`html2canvas`库将打印区域的DOM元素转换为canvas，然后使用`jsPDF`库创建一个PDF对象，并将canvas的图像数据添加到PDF中，最后保存PDF并使用本地打印机打印。请注意，这种方式会将整个打印区域转换为图像，因此可能存在一些打印效果方面的限制。