jsPDF的常规使用

引入方式：
CND:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
Npm:

npm install jspdf jspdf-autotable

HTML 转 PDF
出发事件：

<button onclick="generatePDF()">生成PDF</button>
function generatePDF() {
   
  // 获取需要转换为PDF的元素
  const element = document.getElementById("pdf-content");

  // 创建jsPDF对象
  const pdf = new jsPDF();

  // 将元素转换为canvas对象
  html2canvas(element).then((canvas) => {
   
    // 将canvas对象转换为图像
    const imgData = canvas.toDataURL("image/png");

    // 将图像添加到PDF文件中
    pdf.addImage(imgData, "PNG", 10, 10);

    // 保存PDF文件
    pdf.save("test.pdf");
  });
}

在这个例子中，我们首先获取需要转换为PDF的元素（例如一个DIV元素），然后使用html2canvas库将它转换为一个canvas对象。然后将canvas对象转换为图像，使用addImage方法将图像添加到PDF文件中，最后使用save方法保存PDF文件。

请注意，在使用html2canvas库将元素转换为canvas对象时，可能会遇到一些问题，例如无法正确处理某些CSS属性或JavaScript交互。在这种情况下，可能需要使用其他库或手动创建PDF文件。

HTML 转 Word

import jsPDF from "jspdf";
import "jspdf-autotable";

export default {
   
  methods: {
   
    generateWordDoc() {
   
      // 获取Vue组件中的HTML内容
      const html = document.querySelector("#my-component").innerHTML;

      // 创建一个新的PDF文档
      const doc = new jsPDF();

      // 将HTML内容添加到PDF文档中
      doc.addHTML(html, function() {
   
        // 将PDF文档转换为Word文档
        const blob = doc.output("blob");
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = "output.doc";
        link.click();
        URL.revokeObjectURL(url);
      });
    }
  }
};

在这个例子中，我们首先获取Vue组件中的HTML内容。然后创建一个新的jsPDF文档对象，并使用addHTML方法将HTML内容添加到文档中。addHTML方法的第二个参数是一个回调函数，在PDF生成完成后执行。在回调函数中，我们将PDF文档转换为Word文档，并使用link.click()方法下载文档。

需要注意的是，使用这种方法生成的Word文档可能会丢失格式或样式，并且不能保证在所有Word处理软件中都能正确打开。如果需要更高级的功能或更好的兼容性，请考虑使用其他库或手动创建Word文档。