使用jsPDF添加多幅Chart.js图表时重复显示首个Canvas内容的问题

我之前也碰到过一模一样的问题，大概率是两个常见原因导致的：循环变量的作用域问题，或者所有图表都被绘制到了PDF的同一位置上。下面是修正后的完整代码，以及对应的问题解析：

修正后的导出函数 #

function exporttopdf() {
  // 初始化jsPDF实例
  const doc = new jsPDF();
  // 获取所有承载图表的canvas元素
  const canvases = document.getElementsByClassName("canvas");
  // 初始化页面内的Y轴起始位置（留10mm的上边距）
  let yPosition = 10;

  // 用let声明循环变量，创建块级作用域
  for (let i = 0; i < canvases.length; i++) {
    const currentCanvas = canvases[i];
    // 将canvas转换为PNG格式的base64数据
    const imgData = currentCanvas.toDataURL('image/png');

    // 计算图表在PDF中的适配尺寸（避免超出页面）
    const pageWidth = doc.internal.pageSize.getWidth();
    // 给左右各留10mm边距
    const pdfImgWidth = pageWidth - 20;
    // 按canvas原始宽高比计算PDF中的图片高度
    const pdfImgHeight = (currentCanvas.height * pdfImgWidth) / currentCanvas.width;

    // 检查当前位置是否会超出页面底部，超出则新增页面
    if (yPosition + pdfImgHeight > doc.internal.pageSize.getHeight() - 10) {
      doc.addPage();
      yPosition = 10;
    }

    // 将图表添加到PDF的指定位置
    doc.addImage(imgData, 'PNG', 10, yPosition, pdfImgWidth, pdfImgHeight);

    // 更新Y轴位置，给下一张图表留10mm间距
    yPosition += pdfImgHeight + 10;
  }

  // 导出保存PDF
  doc.save('chart-report.pdf');
}

关键问题解析 #

1. 循环变量的作用域陷阱
   你原来的代码用var i声明循环变量，var是函数级作用域，循环结束后所有迭代都会共享同一个i的值（最后一个元素的索引），导致currentcanvas最终只会指向最后一个canvas元素。改成let i后，每次循环都会创建一个独立的块级作用域，确保每个迭代都能正确获取到对应的canvas。

2. 图表位置重叠导致视觉重复
   如果没有跟踪并更新Y轴位置，所有图表都会被绘制到PDF的同一坐标上，看起来就像是重复显示同一幅图。通过yPosition变量跟踪当前绘制位置，并且在超出页面高度时新增页面，就能让图表按顺序排列在不同页面或同一页面的不同位置。

3. 图表尺寸适配
   直接使用canvas的原始尺寸可能会超出PDF页面范围，通过按比例缩放适配页面宽度，能保证图表完整显示在PDF中。

额外注意事项 #

• 确保图表完全渲染完成后再调用导出函数：如果你的图表是异步加载数据的，要等Chart.js的onComplete回调触发后再执行导出，避免导出空白或不完整的图表。
• 检查canvas的class是否唯一：确认document.getElementsByClassName("canvas")确实获取到了所有目标canvas，没有重复或遗漏的元素。

内容的提问来源于stack exchange，提问作者squilliam