Angular中如何自动导出并下载Highcharts图表？

安全阿岳

2026-7-16

解决Angular-Highcharts中调用exportChart报错的问题

问题原因

Angular-Highcharts提供的Chart对象是对原生Highcharts图表实例的封装，原生的exportChart方法并不在封装类的公开API和类型定义中，因此直接调用this.chart.exportChart()会触发类型错误。同时需要确保Highcharts的导出模块已正确加载，否则即使调用成功也无法完成导出。

解决方案

1. 加载Highcharts导出模块

首先确保在项目中导入并初始化Highcharts的导出相关模块：

import * as Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting';
import HC_exportData from 'highcharts/modules/export-data';

// 初始化导出模块
HC_exporting(Highcharts);
HC_exportData(Highcharts);

2. 通过封装实例获取原生图表对象调用exportChart

Angular-Highcharts的Chart实例提供了ref属性，指向原生的Highcharts图表对象，我们需要通过这个属性来调用exportChart：

// 修正后的导出代码
exportChart() {
  const nativeChart = this.chart.ref;
  if (nativeChart) {
    nativeChart.exportChart({
      type: 'application/pdf',
      filename: 'my-pdf'
    });
  }
}

3. 处理类型断言（可选）

如果TypeScript仍提示类型错误，可以添加类型断言明确ref的类型：

exportChart() {
  const nativeChart = this.chart.ref as Highcharts.Chart;
  nativeChart.exportChart({
    type: 'application/pdf',
    filename: 'my-pdf'
  });
}