如何获取含amcharts4的div完整图并转PDF下载（解决裁剪问题）

我之前也碰到过类似的amCharts4和html2canvas/jsPDF配合导出时的裁剪问题，结合你的场景，给你几个针对性的解决方案：

1. 等待amCharts4完全渲染后再捕获 #

amCharts4是异步绘制的，直接调用html2canvas可能会碰到图表还没画完的情况，导致捕获不完整。你可以监听图表的ready事件，确保渲染完成后再执行导出逻辑：

// 假设你的amCharts实例是chart
chart.events.on("ready", function() {
  const filename = 'ThisIsYourPDFFilename.pdf';
  html2canvas(document.querySelector('.m-content'), {
    scale: 2, // 提高渲染清晰度，避免模糊
    useCORS: true // 如果图表有外部资源（比如自定义图标），开启这个
  }).then(canvas => {
    // 根据canvas尺寸创建适配的PDF
    const pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, canvas.width, canvas.height);
    pdf.save(filename);
  });
});

2. 调整html2canvas的捕获配置 #

有时候Metronic模板的样式（比如overflow、position属性）会影响html2canvas的捕获范围，可以添加额外配置来规避：

html2canvas(document.querySelector('.m-content'), {
  logging: true, // 开启日志，排查哪些元素没被正确捕获
  removeContainer: true,
  allowTaint: true,
  scrollX: 0,
  scrollY: 0 // 确保从顶部开始捕获，避免滚动导致的裁剪
}).then(canvas => {
  // ... PDF生成逻辑
});

3. 优化PDF页面尺寸适配 #

你之前硬编码了211, 298的尺寸，这可能和实际内容的比例不匹配导致裁剪。可以根据canvas的实际尺寸动态设置PDF页面，甚至支持多页导出：

html2canvas(document.querySelector('.m-content')).then(canvas => {
  const filename = 'ThisIsYourPDFFilename.pdf';
  const imgWidth = 595; // A4宽度的pt值（210mm * 2.83pt/mm）
  const pageHeight = 842; // A4高度的pt值
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  let heightLeft = imgHeight;
  let position = 0;

  const pdf = new jsPDF('p', 'pt', 'a4');
  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, imgWidth, imgHeight);
  
  // 如果内容超过一页，自动添加新页面
  heightLeft -= pageHeight;
  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    pdf.addPage();
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;
  }
  
  pdf.save(filename);
});

4. 临时修改模板样式 #

Metronic模板可能有一些全局样式影响捕获，你可以在导出前临时修改.m-content的样式，导出后再恢复：

const contentEl = document.querySelector('.m-content');
// 保存原有样式
const originalOverflow = contentEl.style.overflow;
const originalPosition = contentEl.style.position;

// 临时修改样式，确保内容完全可见
contentEl.style.overflow = 'visible';
contentEl.style.position = 'relative';

html2canvas(contentEl).then(canvas => {
  // ... PDF生成逻辑
  
  // 恢复原有样式
  contentEl.style.overflow = originalOverflow;
  contentEl.style.position = originalPosition;
});

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