JSPDF 生成 PDF 自动下载并预览 - 完整指南

要使用 jspdf 库根据 DOM 生成 PDF 并自动下载并打开预览，您可以按照以下步骤进行操作：\n\n1. 首先，确保您已经引入了 jspdf 库。您可以使用以下 CDN 链接将其添加到您的 HTML 文件中：\n\nhtml\n<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>\n\n\n2. 创建一个按钮或触发事件的元素，以便在点击时生成 PDF 并自动下载。例如，您可以创建一个按钮元素：\n\nhtml\n<button id="downloadPdf">生成 PDF 并下载</button>\n\n\n3. 在 JavaScript 中，获取要转换为 PDF 的 DOM 元素。您可以使用 querySelector 或 getElementById 等方法来选择 DOM 元素。例如，假设您要选择一个具有 id 为 content 的元素：\n\njavascript\nvar element = document.getElementById("content");\n\n\n4. 添加点击事件监听器到下载按钮，以便在点击时执行生成 PDF 的操作。在事件处理函数中，您需要创建一个新的 jspdf 实例，并使用 html 方法将 DOM 元素转换为 PDF 内容。然后，使用 save 方法将 PDF 保存为文件并自动下载。最后，使用 output 方法将 PDF 的数据 URL 传递给一个新的窗口进行预览。完整的代码如下：\n\njavascript\ndocument.getElementById("downloadPdf").addEventListener("click", function() {\n var element = document.getElementById("content");\n var pdf = new jsPDF();\n pdf.html(element, {\n callback: function(pdf) {\n pdf.save("generated.pdf");\n var url = pdf.output('dataurlstring');\n window.open(url, '_blank');\n }\n });\n});\n\n\n请注意，以上代码中的 content 和 downloadPdf 是示例 ID，您需要根据自己的 HTML 和需求进行相应的更改。\n\n通过按照以上步骤操作，您将能够使用 jspdf 库根据 DOM 生成 PDF 并自动下载，然后打开预览。