js html转pdf

// 使用 jsPDF 和 html2canvas 库将 HTML 转换为 PDF 的示例代码

// 引入必要的库
// <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
// <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

function htmlToPdf() {
    // 选择要转换为 PDF 的 HTML 元素
    const element = document.getElementById('content');

    // 使用 html2canvas 将 HTML 元素截图为图像
    html2canvas(element).then(canvas => {
        // 创建一个新的 jsPDF 实例
        const pdf = new jsPDF('p', 'mm', 'a4');

        // 获取页面宽度和高度
        const imgData = canvas.toDataURL('image/png');
        const imgWidth = 210; // A4纸的宽度为210mm
        const pageHeight = 297; // A4纸的高度为297mm
        let imgHeight = canvas.height * imgWidth / canvas.width;
        let heightLeft = imgHeight;

        // 添加图像到 PDF 中
        const pdfPosition = 0;

        pdf.addImage(imgData, 'PNG', 0, pdfPosition, imgWidth, imgHeight);

        // 如果图像高度超过一页，则分页处理
        while (heightLeft >= pageHeight) {
            heightLeft -= pageHeight;
            pdf.addPage();
            pdfPosition = heightLeft - imgHeight;
            pdf.addImage(imgData, 'PNG', 0, pdfPosition, imgWidth, imgHeight);
        }

        // 下载生成的 PDF 文件
        pdf.save('output.pdf');
    });
}

// 在需要的地方调用该函数
// htmlToPdf();

解释说明：

1. 引入库：使用 html2canvas 将 HTML 元素截图为图像，然后使用 jsPDF 将图像添加到 PDF 中。
2. 选择元素：通过 document.getElementById 选择要转换为 PDF 的 HTML 元素。
3. 截图并生成 PDF：使用 html2canvas 截取 HTML 元素的图像，并将其添加到 jsPDF 实例中。
4. 处理多页：如果图像高度超过一页，则会自动分页处理。
5. 下载 PDF：最后调用 pdf.save 方法下载生成的 PDF 文件。

你可以根据需要调整页面大小、边距等参数。