jsPDF的常规使用

引入方式：

CND:

Npm:

npm install jspdf jspdf-autotable

HTML 转 PDF

出发事件：

生成PDF

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文档。