导出PDF时图表无法显示问题求助（附StackBlitz示例）

常见修复方案 #

1. 等待图表完全渲染后导出 #

基于Canvas的图表需要时间完成绘制，若导出操作提前触发会导致空白。可通过监听图表渲染完成事件控制导出时机：

// 以Chart.js为例，初始化时添加渲染完成回调
this.chart = new Chart(this.canvasRef.nativeElement, {
  // 图表配置项
  options: {
    animation: {
      onComplete: () => {
        this.chartReady = true;
      }
    }
  }
});

// 导出函数中等待图表就绪
async exportToPdf() {
  while (!this.chartReady) {
    await new Promise(resolve => setTimeout(resolve, 100));
  }
  // 执行PDF导出逻辑
}

2. 将Canvas转换为图片后导出 #

部分PDF工具对Canvas支持不佳，可先转成图片再替换原元素：

// 获取Canvas并转为DataURL
const canvas = this.canvasRef.nativeElement;
const imgData = canvas.toDataURL('image/png');

// 创建img元素替换Canvas
const img = document.createElement('img');
img.src = imgData;
img.style.width = canvas.style.width;
img.style.height = canvas.style.height;
canvas.parentNode.replaceChild(img, canvas);

// 执行PDF导出，完成后可恢复原Canvas（可选）

3. 调整PDF导出工具配置 #

若使用html2canvas或jsPDF，需优化配置以支持动态内容：

html2canvas(document.body, {
  useCORS: true,
  allowTaint: true,
  scale: 2 // 提高分辨率避免模糊
}).then(canvas => {
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF('p', 'mm', 'a4');
  const imgWidth = 210;
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  
  pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
  pdf.save('document.pdf');
});

4. 排查CSS样式冲突 #

临时移除可能影响可见性的CSS属性（如display: none、opacity: 0），确保图表容器尺寸在导出时正确计算。

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