使用jspdf和html2canvas将DOM元素生成PDF并自动下载预览

要实现根据DOM生成PDF并自动下载完成后打开预览，你可以使用以下步骤：\n\n1. 引入jspdf库和html2canvas库。确保在HTML文件中正确引入这两个库的CDN链接或本地文件。\n\nhtml\n<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>\n<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>\n\n\n2. 创建一个JavaScript函数，用于生成PDF并自动下载。在该函数中，你可以使用html2canvas库将DOM元素转换为canvas，并使用jspdf库将canvas转换为PDF。\n\njavascript\nfunction generatePDF() {\n // 获取要转换为PDF的DOM元素\n const element = document.getElementById('pdf-element');\n\n // 使用html2canvas将DOM元素转换为canvas\n html2canvas(element).then((canvas) => {\n // 创建一个空PDF对象\n const pdf = new jsPDF();\n\n // 计算canvas的宽度和高度\n const width = canvas.width;\n const height = canvas.height;\n\n // 将canvas转换为图像，并将其添加到PDF中\n pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, width, height);\n\n // 使用下载链接将PDF保存到本地\n pdf.save('pdf-document.pdf');\n\n // 使用window.open打开PDF预览\n window.open(pdf.output('bloburl'), '_blank');\n });\n}\n\n\n3. 在HTML中添加一个按钮，用于触发生成PDF的函数。\n\nhtml\n<button onclick="generatePDF()">生成PDF</button>\n\n\n4. 在HTML中添加要转换为PDF的DOM元素。给该元素一个唯一的ID，以便在JavaScript函数中引用它。\n\nhtml\n<div id="pdf-element">\n <!-- 添加要转换为PDF的DOM内容 -->\n</div>\n\n\n现在，当你点击"生成PDF"按钮时，将会根据DOM生成PDF文件并自动下载完成后打开预览。