原生 JS 实现多个 Canvas 生成 PDF 并拼接打印

"原生 JS 实现多个 Canvas 生成 PDF 并拼接打印"\n\n使用 jsPDF 库和 canvas2pdf 库将多个 Canvas 元素转换为图片并拼接成 PDF 文档，实现多张图片的打印功能。\n\n首先，需要引入 jsPDF 库和 canvas2pdf 库：\n\nhtml\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js\"</script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js\"</script>\n\n\n然后，创建一个空的 pdf 文档对象：\n\njavascript\nvar pdf = new jsPDF();\n\n\n接下来，需要将每个 canvas 转换为图片，并添加到 pdf 文档中：\n\njavascript\nfunction addCanvasToPDF(canvas) {\n // 将 canvas 转换为图片\n var imgData = canvas.toDataURL('image/png');\n\n // 添加图片到 pdf 文档\n pdf.addImage(imgData, 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());\n}\n\n// 获取所有的 canvas 元素\nvar canvasList = document.querySelectorAll('canvas');\n\n// 遍历每个 canvas 元素，并将其添加到 pdf 文档中\ncanvasList.forEach(function(canvas) {\n addCanvasToPDF(canvas);\n});\n\n\n最后，可以将 pdf 文档保存为文件或直接打印：\n\njavascript\n// 保存为文件\npdf.save('output.pdf');\n\n// 直接打印\npdf.autoPrint();\nwindow.open(pdf.output('bloburl'), '_blank');\n\n\n完整的代码如下所示：\n\njavascript\n// 引入 jsPDF 和 html2canvas 库\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js\"</script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js\"</script>\n\n// 创建一个空的 pdf 文档对象\nvar pdf = new jsPDF();\n\n// 将 canvas 转换为图片，并添加到 pdf 文档中\nfunction addCanvasToPDF(canvas) {\n // 将 canvas 转换为图片\n var imgData = canvas.toDataURL('image/png');\n\n // 添加图片到 pdf 文档\n pdf.addImage(imgData, 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());\n}\n\n// 获取所有的 canvas 元素\nvar canvasList = document.querySelectorAll('canvas');\n\n// 遍历每个 canvas 元素，并将其添加到 pdf 文档中\ncanvasList.forEach(function(canvas) {\n addCanvasToPDF(canvas);\n});\n\n// 保存为文件\npdf.save('output.pdf');\n\n// 直接打印\npdf.autoPrint();\nwindow.open(pdf.output('bloburl'), '_blank');\n\n\n注意：由于涉及到转换 canvas 为图片，可能会存在跨域问题，需要在服务器环境下运行。