如何将多个Chart.js图表分页导出为PDF并为每个图表添加标题

前置准备 #

先给每个图表对应的canvas元素添加data-title自定义属性，存储该图表的专属标题：

<!-- 示例写法 -->
<canvas id="chart1" data-title="第一季度营收趋势"></canvas>
<canvas id="chart2" data-title="各区域用户占比"></canvas>
<canvas id="chart3" data-title="用户留存率走势"></canvas>

修改后的完整JS代码 #

$('#downloadPdf').click(function(event) {
  // 沿用原页面尺寸作为PDF每页尺寸，保持显示比例一致
  const reportPageHeight = $('#reportPage').innerHeight();
  const reportPageWidth = $('#reportPage').innerWidth();
  // 初始化PDF，横向、单位pt、自定义尺寸
  const pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]);

  // 排版参数可按需调整
  const titleFontSize = 16; // 标题字号
  const titleTopMargin = 40; // 标题距离页面顶部距离
  const chartGap = 20; // 图表和标题之间的间距
  const chartTopMargin = titleTopMargin + titleFontSize + chartGap;

  // 循环处理每个图表
  $("canvas").each(function(index) {
    // 除了第一个图表，其余处理前先新增空白页
    if (index !== 0) {
      pdf.addPage();
    }

    // 读取当前图表的专属标题
    const chartTitle = $(this).data('title') || '未命名图表';
    // 绘制标题，默认水平居中
    pdf.setFontSize(titleFontSize);
    pdf.text(chartTitle, reportPageWidth / 2, titleTopMargin, { align: 'center' });

    // 获取当前图表的尺寸
    const canvasHeight = $(this).innerHeight();
    const canvasWidth = $(this).innerWidth();
    // 计算图表水平居中的左侧偏移量
    const chartLeftOffset = (reportPageWidth - canvasWidth) / 2;
    // 插入图表到标题下方
    pdf.addImage($(this)[0], 'PNG', chartLeftOffset, chartTopMargin, canvasWidth, canvasHeight);
  });

  // 导出PDF文件
  pdf.save('多图表导出.pdf');
});

核心改动说明 #

• 移除了原逻辑中合并所有图表到单个大画布的代码，改为逐图表单独处理，避免多图挤在同一页
• 新增自定义属性读取逻辑，无需硬编码标题，可灵活配置每个图表的专属标题
• 新增排版逻辑，标题默认居中放置在每页顶部，图表也做了水平居中处理，符合“标题+图表”的结构要求
• 循环中加入新增页判断，每处理完一个图表自动新建下一页，实现每页一个图表的需求

常见问题修复 #

如果导出时出现图表空白的情况，可在Chart.js初始化时关闭动画，确保导出时图表已经渲染完成：

const myChart = new Chart(ctx, {
  // 其他配置不变
  options: {
    animation: false,
    // 其他原有配置保留
  }
});

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