原生js实现多个canvas生成pdf并拼接在一起进行打印

要实现多个canvas生成pdf并拼接在一起进行打印，可以使用jsPDF库和canvas2pdf库来实现。

首先，需要引入jsPDF库和canvas2pdf库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

然后，创建一个空的pdf文档对象：

var pdf = new jsPDF();

接下来，需要将每个canvas转换为图片，并添加到pdf文档中：

function addCanvasToPDF(canvas) {
  // 将canvas转换为图片
  var imgData = canvas.toDataURL('image/png');

  // 添加图片到pdf文档
  pdf.addImage(imgData, 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());
}

// 获取所有的canvas元素
var canvasList = document.querySelectorAll('canvas');

// 遍历每个canvas元素，并将其添加到pdf文档中
canvasList.forEach(function(canvas) {
  addCanvasToPDF(canvas);
});

最后，可以将pdf文档保存为文件或直接打印：

// 保存为文件
pdf.save('output.pdf');

// 直接打印
pdf.autoPrint();
window.open(pdf.output('bloburl'), '_blank');

完整的代码如下所示：

// 引入jsPDF和html2canvas库
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

// 创建一个空的pdf文档对象
var pdf = new jsPDF();

// 将canvas转换为图片，并添加到pdf文档中
function addCanvasToPDF(canvas) {
  // 将canvas转换为图片
  var imgData = canvas.toDataURL('image/png');

  // 添加图片到pdf文档
  pdf.addImage(imgData, 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());
}

// 获取所有的canvas元素
var canvasList = document.querySelectorAll('canvas');

// 遍历每个canvas元素，并将其添加到pdf文档中
canvasList.forEach(function(canvas) {
  addCanvasToPDF(canvas);
});

// 保存为文件
pdf.save('output.pdf');

// 直接打印
pdf.autoPrint();
window.open(pdf.output('bloburl'), '_blank');

注意：由于涉及到转换canvas为图片，可能会存在跨域问题，需要在服务器环境下运行