如何在Node.js中获取Highcharts图表图片并解决导出报错问题

一、修复TypeError: chartExporter.export is not a function错误 #

这个问题是因为highcharts-export-server的API在新版本中已变更，原export方法已被移除，换成了exportChart（回调式）或Promise风格的调用方式。以下是修正后的代码：

回调式写法 #

const fs = require("fs");
const chartExporter = require("highcharts-export-server");

// 初始化导出池
chartExporter.initPool();

// 你的Highcharts配置，需为合法JSON对象
const chartOptions = {
  title: { text: '示例图表' },
  xAxis: { categories: ['Jan', 'Feb', 'Mar'] },
  series: [{ data: [1, 2, 3] }]
};

// 使用正确的exportChart方法
chartExporter.exportChart({
  type: "svg",
  outfile: "./output-file.svg",
  options: chartOptions
}, (err, res) => {
  if (err) {
    console.error('生成图表失败:', err);
    // 出错也要销毁池释放资源
    chartExporter.killPool();
    return;
  }
  console.log(`图表已成功生成为SVG，路径：${res.filename}`);
  // 完成后销毁池
  chartExporter.killPool();
});

Promise风格写法（更推荐，避免回调嵌套） #

const chartExporter = require("highcharts-export-server");

async function generateChart() {
  try {
    await chartExporter.initPool();
    const chartOptions = { /* 你的Highcharts配置 */ };
    const res = await chartExporter.exportChart({
      type: "png",
      options: chartOptions
    });
    // 无需存文件的话，直接用res.data（Base64格式），适合邮件发送
    console.log('图表Base64数据:', res.data);
  } catch (err) {
    console.error('生成失败:', err);
  } finally {
    await chartExporter.killPool();
  }
}

generateChart();

二、解决二次生成报错问题 #

二次生成报错大概率是池资源未正确复用或销毁导致的，按以下方式处理：

• 若单次生成后销毁池，二次生成前必须重新调用initPool()
• 若需多次生成，不要每次生成后都killPool()，待所有生成任务完成后再统一销毁池

示例：多次生成的正确姿势

const chartExporter = require("highcharts-export-server");

async function generateMultipleCharts() {
  try {
    // 仅初始化一次池
    await chartExporter.initPool();
    
    // 生成第一个图表
    const res1 = await chartExporter.exportChart({
      type: "png",
      options: { /* 配置1 */ }
    });
    console.log('第一个图表生成完成');

    // 生成第二个图表
    const res2 = await chartExporter.exportChart({
      type: "pdf",
      options: { /* 配置2 */ }
    });
    console.log('第二个图表生成完成');

  } catch (err) {
    console.error('生成失败:', err);
  } finally {
    // 所有任务完成后销毁池
    await chartExporter.killPool();
  }
}

generateMultipleCharts();

三、替代实现方案：用Puppeteer直接渲染 #

如果highcharts-export-server的兼容问题较多，可以用Puppeteer（无头Chrome）直接渲染Highcharts页面生成图片，效果和前端完全一致：

步骤1：安装依赖 #

npm install puppeteer highcharts

步骤2：代码实现 #

const puppeteer = require('puppeteer');
const fs = require('fs');

async function generateChartWithPuppeteer() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 注入Highcharts和图表配置
  await page.setContent(`
    <html>
      <body>
        <div id="container" style="width: 800px; height: 600px;"></div>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script>
          Highcharts.chart('container', {
            title: { text: 'Puppeteer生成的图表' },
            xAxis: { categories: ['Jan', 'Feb', 'Mar'] },
            series: [{ data: [10, 20, 15] }]
          });
        </script>
      </body>
    </html>
  `);

  // 等待图表渲染完成
  await page.waitForSelector('#container > svg');

  // 截图保存为图片，或获取Base64数据用于邮件发送
  const screenshotBuffer = await page.screenshot({ type: 'png', path: './chart.png' });
  const base64Chart = screenshotBuffer.toString('base64');

  await browser.close();
  console.log('图表生成完成');
}

generateChartWithPuppeteer();

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