如何实现点击打印按钮先刷新页面，解决移动端动态图表打印适配问题

核心问题分析 #

直接刷新页面会中断打印流程，导致图表还未完成渲染就进入打印预览；而默认打印触发时，图表库没有接到尺寸变更的通知，所以不会重新适配打印视图宽度。

解决方案 #

1. 监听打印前事件，手动触发图表重绘

不要用location.reload()，直接调用图表库的重绘方法，强制图表重新计算尺寸适配打印视图：

window.addEventListener('beforeprint', function() {
  // 替换为你实际使用的图表实例重绘方法
  // ECharts 用 myChart.resize()
  // Highcharts 用 chart.reflow()
  // Chart.js 用 chart.resize()
  myChart.resize();
});

2. 优化打印媒体查询，确保容器宽度正确

给打印样式设置图表容器的宽度为100%，避免被原屏幕宽度限制：

@media print {
  .chart-container { /* 替换为你的图表容器类名 */
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
}

3. 手动控制打印流程，给重绘留缓冲时间

部分图表库重绘需要短暂时间，可修改打印按钮的点击事件，先触发重绘再延迟执行打印：

<button onclick="handlePrint()">Print this page</button>
<script>
function handlePrint() {
  // 先触发图表重绘
  myChart.resize();
  // 延迟100-300ms执行打印，确保重绘完成
  setTimeout(() => {
    window.print();
  }, 150);
}
</script>

注意事项 #

• 避免依赖onbeforeprint的同步执行逻辑，不同浏览器触发时机有差异，手动控制打印流程更可靠；
• 检查图表容器的父元素，确保打印样式中没有固定宽度或溢出隐藏的限制，防止图表无法扩展。

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