前端使用html2canvas和pdfmake将html转为pdf并下载

要使用html2canvas和pdfmake将HTML转为PDF并下载，您可以按照以下步骤操作：

1. 首先，您需要在HTML页面中引入html2canvas和pdfmake的库文件。您可以通过以下方式在HTML文件中添加这两个库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/pdfmake.min.js"></script>

2. 接下来，您需要创建一个按钮或触发器，以便在单击时开始转换并下载PDF。例如：

<button onclick="generatePDF()">Download PDF</button>

3. 然后，您需要编写一个JavaScript函数来执行转换和下载操作。该函数将使用html2canvas将HTML元素转换为图像，然后使用pdfmake将这些图像添加到PDF文档中。最后，该函数将使用pdfmake下载PDF文档。以下是一个示例函数：

function generatePDF() {
  // 获取要转换为PDF的HTML元素
  const element = document.getElementById("html-content");

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

    // 创建一个PDF文档对象
    const docDefinition = {
      content: [
        {
          image: imgData,
          width: 500,
        },
      ],
    };
    const pdfDocGenerator = pdfMake.createPdf(docDefinition);

    // 下载PDF文档
    pdfDocGenerator.download("document.pdf");
  });
}

在这个示例中，我们使用了一个id为“html-content”的HTML元素，并将其转换为PNG图像。然后，我们创建了一个pdfmake文档定义对象，其中包含一个图像元素，该元素使用先前创建的DataURL。最后，我们使用pdfmake的下载方法下载PDF文档。

4. 最后，您需要确保您的HTML元素可以正确转换为图像。这意味着您需要确保该元素在屏幕上可见，并且没有被另一个元素遮盖。

通过这些步骤，您应该能够使用html2canvas和pdfmake将HTML转换为PDF并下载。