Angular5+Highcharts6.0.7自定义按钮导出CSV失败，PNG正常求助

Hey there! Let's get that CSV export working for you—since your PNG export is already running, we just need to iron out a couple of details specific to CSV in Highcharts.

First: Make Sure You've Loaded the Required Highcharts Modules #

Highcharts' CSV export relies on two key modules that aren't included in the core library: exporting (handles all export logic) and export-data (specifically generates CSV/XLS content). If these aren't loaded, the CSV export will fail because the necessary methods won't exist.

Here's how to set them up in your Angular 5 app:

1. Import the modules in your AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from 'angular2-highcharts';
import * as Highcharts from 'highcharts';
// Import the required export modules
import * as Exporting from 'highcharts/modules/exporting';
import * as ExportData from 'highcharts/modules/export-data';

// Initialize the modules with Highcharts
Exporting(Highcharts);
ExportData(Highcharts);

@NgModule({
  imports: [BrowserModule, ChartModule.forRoot(Highcharts)],
  declarations: [YourComponent], // Replace with your actual component name
  bootstrap: [YourComponent]
})
export class AppModule { }

Second: Fix Your downloadCsv Method #

From your snippet, it looks like you started writing this.chart.get... but didn't complete it. Highcharts handles CSV generation automatically when you call exportChart with type: 'text/csv'—you don't need to manually pass a csv property unless you want to customize the output.

Here's the corrected method:

downloadCsv(): void {
  try {
    this.chart.exportChart({
      type: 'text/csv',
      filename: this.title
    }, {
      itemDelimiter: ';' // Use your preferred delimiter (comma is default)
    });
  } catch (error) {
    console.error('CSV export error:', error);
    // Optional: Add user-friendly feedback here
  }
}

If You Need Custom CSV Content #

If you want to tweak the generated CSV (like modifying delimiters or adding extra rows), you can use this.chart.getCSV() (available once the export-data module is loaded) to get the raw CSV string, modify it, then pass it to exportChart:

downloadCsv(): void {
  const customCsv = this.chart.getCSV().replace(',', ';'); // Replace commas with semicolons
  this.chart.exportChart({
    type: 'text/csv',
    filename: this.title
  }, {
    csv: customCsv // Pass your modified CSV content
  });
}

Common Troubleshooting Checks #

• Verify module installation: Ensure you have Highcharts 6.0.7 installed, and that the exporting and export-data modules are included in your dependencies.
• Check console errors: If you see an error like getCSV is not a function, the export-data module isn't loaded correctly—double-check the initialization in AppModule.
• Confirm this.chart is valid: Add a quick check like if (this.chart) { ... } to avoid errors if the chart hasn't finished initializing yet.

That should get your CSV export working smoothly alongside your PNG export!

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