vue-html2pdf 原理

vue-html2pdf 是一个 Vue.js 插件，用于将 HTML 内容转换为 PDF 文件。它基于 jsPDF 和 html2canvas 库实现。

具体原理如下：

1. 使用 html2canvas 将 HTML 元素转换为 canvas。

2. 将 canvas 图像转换为 base64 编码的数据字符串。

3. 使用 jsPDF 将 base64 编码的数据字符串添加到 PDF 文档中。

4. 输出 PDF 文件。

因此，需要先引入 html2canvas 和 jsPDF 库。

使用 vue-html2pdf 插件时，需要在 Vue 实例中引入插件，并在需要将 HTML 内容转换为 PDF 文件的组件中，调用插件提供的方法。例如：

import htmlToPdf from 'vue-html2pdf'

export default {
  // ...
  methods: {
    downloadPdf() {
      const options = {
        filename: 'example.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { dpi: 192, letterRendering: true },
        jsPDF: { unit: 'pt', format: 'a4', orientation: 'portrait' }
      }
      const content = this.$refs.content
      htmlToPdf().set(options).from(content).save()
    }
  }
}

其中，options 是一个配置对象，用于设置生成 PDF 文件的参数，如文件名、图片质量、画布 DPI 等。content 是需要转换为 PDF 文件的 HTML 元素，可以使用 ref 属性获取。

最后，通过调用 htmlToPdf().set(options).from(content).save() 方法生成并下载 PDF 文件。