vue3中html2canvas导出pdf用法

Vue 3中的html2canvas导出PDF的用法与Vue 2基本相同，只是在引入和使用模块的方式有些许不同。以下是一个简单的示例代码：

安装依赖：

npm install jspdf html2canvas --save

使用示例：

<template>
  <div>
    <h1>导出PDF示例</h1>
    <button @click="exportPdf">导出PDF</button>
    <div ref="pdfContent">
      <!-- 要导出为PDF的内容 -->
      <p>{{ content }}</p>
    </div>
  </div>
</template>

<script>
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'

export default {
  name: 'ExportPdf',
  data() {
    return {
      content: '这是要导出为PDF的内容。'
    }
  },
  methods: {
    exportPdf() {
      const pdfContent = this.$refs.pdfContent
      const pdf = new jsPDF('p', 'pt', 'a4')

      html2canvas(pdfContent).then(canvas => {
        const imgData = canvas.toDataURL('image/png')
        pdf.addImage(imgData, 'PNG', 0, 0, pdfContent.offsetWidth, pdfContent.offsetHeight)
        pdf.save('导出PDF示例.pdf')
      })
    }
  }
}
</script>

在Vue 3中，我们可以使用`import { createApp } from 'vue'`来创建Vue实例。在组件中使用`this.$refs`来获取DOM元素的引用。在使用html2canvas和jsPDF时，只需按照上面的示例导入这两个库即可。