如何使用JavaScript和HTML打印包含Canvas图表的指定Div？

常见原因与对应解决方案 #

1. 确保Canvas完全渲染后再打印 #

多数图表库（如Chart.js、ECharts）为异步渲染，若在图表未绘制完成时触发打印，会出现空白。

• 利用图表库的渲染完成事件：比如Chart.js可监听afterRender事件：

  const chart = new Chart(document.getElementById('myChart'), { /* 配置项 */ });
  chart.options.plugins = {
    afterRender: function() {
      printDiv('target-div');
    }
  };
  

• 临时方案：给打印操作加短延迟，确保渲染完成：

  function printDiv(divId) {
    setTimeout(() => {
      window.print();
    }, 500); // 根据图表大小调整延迟时间
  }
  

2. 将Canvas转为图片后再打印 #

部分浏览器对打印Canvas支持不佳，转成图片可规避这类问题：

function printDiv(divId) {
  const targetDiv = document.getElementById(divId);
  const canvas = targetDiv.querySelector('canvas');
  if (!canvas) {
    window.print();
    return;
  }

  // 保存Canvas原有状态
  const originalDisplay = canvas.style.display;
  // 创建图片元素替代Canvas
  const chartImg = document.createElement('img');
  chartImg.src = canvas.toDataURL('image/png');
  chartImg.style.maxWidth = '100%';
  canvas.style.display = 'none';
  targetDiv.appendChild(chartImg);

  // 执行打印
  window.print();

  // 打印完成后恢复原Canvas
  setTimeout(() => {
    targetDiv.removeChild(chartImg);
    canvas.style.display = originalDisplay;
  }, 100);
}

3. 检查并修复打印样式 #

打印样式可能隐藏了Canvas或其父元素，添加打印专用CSS：

@media print {
  /* 确保目标div和Canvas在打印时可见 */
  #target-div, #target-div canvas {
    display: block !important;
    visibility: visible !important;
    max-width: 100%;
    max-height: 100%;
  }
  /* 隐藏页面其他不需要打印的元素 */
  body > *:not(#target-div) {
    display: none;
  }
}

4. 使用隔离的iframe打印 #

通过iframe复制目标内容和样式，避免页面其他样式干扰打印：

function printDiv(divId) {
  const targetDiv = document.getElementById(divId);
  const printIframe = document.createElement('iframe');
  printIframe.style.display = 'none';
  document.body.appendChild(printIframe);

  const iframeDoc = printIframe.contentDocument || printIframe.contentWindow.document;
  // 复制页面样式到iframe
  document.querySelectorAll('style, link[rel="stylesheet"]').forEach(style => {
    iframeDoc.head.appendChild(style.cloneNode(true));
  });

  // 复制目标div并处理Canvas
  const divClone = targetDiv.cloneNode(true);
  const canvas = divClone.querySelector('canvas');
  if (canvas) {
    const img = document.createElement('img');
    img.src = canvas.toDataURL('image/png');
    img.style.maxWidth = '100%';
    divClone.replaceChild(img, canvas);
  }

  iframeDoc.body.appendChild(divClone);

  // 加载完成后打印并清理iframe
  printIframe.onload = () => {
    printIframe.contentWindow.print();
    setTimeout(() => document.body.removeChild(printIframe), 100);
  };
}

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