求助：HighCharts折线图打印父页面时无法完整渲染

方案1：利用HighCharts内置打印事件强制重绘 #

HighCharts提供beforePrint和afterPrint事件，可在打印前后调整图表尺寸并触发重绘，确保适配打印容器：

// 初始化HighCharts实例时绑定事件
const chart = Highcharts.chart('chart-container', {
  chart: {
    events: {
      beforePrint: function() {
        const container = this.renderTo;
        // 临时存储原始宽度
        this._originalWidth = container.style.width;
        // 强制容器宽度为打印时的可用宽度（100%）
        container.style.width = '100%';
        // 触发图表重流，适配新宽度
        this.reflow();
      },
      afterPrint: function() {
        const container = this.renderTo;
        // 恢复容器原始宽度
        container.style.width = this._originalWidth || '';
        // 重绘恢复页面显示状态
        this.reflow();
      }
    }
  },
  // 其他图表配置（数据、坐标轴等）
});

方案2：优化打印媒体查询CSS #

针对打印场景添加专属样式，确保图表容器及SVG能自适应打印纸张宽度：

/* 全局或组件级打印样式 */
@media print {
  /* 确保报表卡片在打印时占满可用宽度 */
  .report-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 图表容器强制自适应宽度 */
  .chart-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* HighCharts SVG避免被裁剪 */
  .chart-container svg {
    width: 100% !important;
    height: auto !important;
  }
}

如果使用了Shadow DOM封装的自定义Web组件，需要让打印样式穿透到组件内部：

/* 自定义Web组件内部样式 */
:host-context(@media print) {
  :host {
    width: 100% !important;
    display: block !important;
  }

  .chart-container {
    width: 100% !important;
  }
}

方案3：打印前手动触发图表重绘 #

在调用window.print()前，强制图表完成重绘，避免捕获预渲染的旧视图：

// Angular组件中打印按钮的点击事件处理
onPrintReport() {
  // 获取自定义Web组件中的HighCharts实例（根据实际组件通信方式调整）
  const chartInstance = this.chartWebComponent.getChartInstance();
  
  // 触发图表重流，适配当前打印容器尺寸
  chartInstance.reflow();
  
  // 等待重绘完成后再调用打印（延迟时间可根据图表复杂度调整）
  setTimeout(() => {
    window.print();
  }, 200);
}

额外注意事项 #

• 若设置图表宽度为100%时仅显示Y轴，需确保容器有明确的高度约束，或在图表配置中设置height: null让图表自适应容器高度：

  chart: {
    width: '100%',
    height: null, // 自适应高度
    // 其他配置
  }
  

• 避免为图表容器设置固定像素宽度，打印时需依赖百分比宽度实现自适应。

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