如何将ng2-charts生成的Canvas图表插入jsPDF文档？

完全可以把ng2-charts生成的Canvas折线图直接添加到jsPDF文档里，具体实现步骤如下：

1. 获取Canvas元素引用 #

在Angular组件中通过ViewChild获取图表对应的Canvas DOM元素，同时给模板中的Canvas添加标识：

组件代码片段 #

import { Component, ViewChild, ElementRef } from '@angular/core';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  // 获取Canvas引用
  @ViewChild('lineChart') lineChart!: ElementRef<HTMLCanvasElement>;

  // 你的图表数据和配置（已定义）
  chartData = ...;
  lineChartOptions = ...;
  lineChartLegend = true;
  
  private chartImgData!: string;
}

模板中修改Canvas标签 #

<canvas #lineChart baseChart width="1000" height="250" 
        [type]="'line'" [data]="chartData" 
        [options]="lineChartOptions" [legend]="lineChartLegend"
        (chartReady)="onChartReady()">
</canvas>

2. 提取Canvas图像数据 #

利用Canvas的toDataURL方法将图表转为PNG格式的base64数据，务必在图表完全渲染后执行（通过chartReady事件确保）：

onChartReady() {
  // 图表已完全渲染，可安全提取图像
  const canvas = this.lineChart.nativeElement;
  this.chartImgData = canvas.toDataURL('image/png');
}

3. 将图像添加到PDF并结合AutoTable #

在生成PDF的方法中，先用addImage添加图表，再调用autoTable插入表格，注意设置好元素的位置避免重叠：

generatePDF() {
  const doc = new jsPDF('p', 'mm', 'a4');
  
  // 添加图表到PDF：参数依次为图像数据、格式、X坐标、Y坐标、宽度、高度
  // 按A4页面适配：宽度设为190mm（留10mm左右边距），高度按原Canvas比例计算（1000:250=4:1，所以190/4=47.5）
  doc.addImage(this.chartImgData, 'PNG', 10, 10, 190, 47.5);
  
  // 添加表格（沿用你原有的AutoTable配置，调整startY避免和图表重叠）
  autoTable(doc, {
    startY: 70, // 图表底部在10+47.5=57.5位置，设为70留间距
    theme: 'grid',
    headStyles: {
      fillColor: [32,42,68]
    },
    head: [/* 你的表头数组 */],
    body: /* 你的detArr数据 */
  });
  
  // 保存或下载PDF
  doc.save('图表与数据报表.pdf');
}

注意事项 #

• 必须等待图表渲染完成再提取图像，否则可能得到空白图表，chartReady事件是最可靠的触发时机。
• 调整addImage的位置和尺寸参数时，要适配PDF页面尺寸（A4为210×297mm），保持图表比例避免拉伸变形。
• 多个图表的话，给每个Canvas添加独立的ViewChild引用，依次添加到PDF的不同Y坐标位置即可。

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