如何用新工具将Highcharter export_hc的JSON转为含多图表的PDF

方案一：Puppeteer（推荐，完整支持Highcharts所有模块） #

Puppeteer是Chrome官方无头浏览器工具，能完整渲染Highcharts各类图表，完美解决箱线图等特殊图表的模块依赖问题。

步骤： #

1. 初始化项目并安装依赖

mkdir chart-to-pdf && cd chart-to-pdf
npm init -y
npm install puppeteer highcharts

2. 编写转换脚本（命名为convert-charts.js）

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

// 读取Highcharts JSON配置
const barChartConfig = JSON.parse(fs.readFileSync('./hc_barplot_is_blue.js', 'utf8'));
const boxPlotConfig = JSON.parse(fs.readFileSync('./hc_boxplot_is_red.js', 'utf8'));

// 生成用于渲染的HTML内容
const htmlContent = `
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script> <!-- 箱线图必须依赖此模块 -->
    <style>
        body { margin: 20px; }
        .chart-container { width: 800px; height: 400px; margin-bottom: 40px; }
    </style>
</head>
<body>
    <div id="bar-chart" class="chart-container"></div>
    <div id="box-chart" class="chart-container"></div>
    <script>
        // 渲染柱状图
        Highcharts.chart('bar-chart', ${JSON.stringify(barChartConfig)});
        // 渲染箱线图
        Highcharts.chart('box-chart', ${JSON.stringify(boxPlotConfig)});
    </script>
</body>
</html>
`;

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    // 加载生成的HTML内容，等待图表渲染完成
    await page.setContent(htmlContent, { waitUntil: 'networkidle0' });
    // 导出为PDF，两个图表在同一页面（可通过CSS添加page-break控制分页）
    await page.pdf({
        path: './combined-charts.pdf',
        format: 'A4',
        printBackground: true // 确保图表背景色（蓝色/红色）被导出
    });

    await browser.close();
    console.log('PDF生成完成：combined-charts.pdf');
})();

3. 执行转换命令

node convert-charts.js

方案二：jsPDF + Highcharts SVG导出（轻量无浏览器依赖） #

先将JSON配置转为SVG，再用jsPDF合并到同一PDF文件，适合不需要完整浏览器环境的场景。

步骤： #

1. 安装依赖

npm init -y
npm install highcharts highcharts-more jspdf jsdom-global

2. 编写转换脚本（命名为svg-to-pdf.js）

const Highcharts = require('highcharts');
require('highcharts-more')(Highcharts); // 注册箱线图模块
const jsPDF = require('jspdf');
const fs = require('fs');

// 在Node.js环境模拟DOM（Highcharts依赖DOM）
require('jsdom-global')();

// 将Highcharts配置转为SVG字符串
function chartToSvg(config) {
    const chart = Highcharts.chart({
        renderTo: document.createElement('div'),
        ...config,
        chart: { ...config.chart, width: 700, height: 350 } // 适配A4页面宽度
    });
    const svg = chart.getSVG();
    chart.destroy();
    return svg;
}

// 读取图表配置
const barChartConfig = JSON.parse(fs.readFileSync('./hc_barplot_is_blue.js', 'utf8'));
const boxPlotConfig = JSON.parse(fs.readFileSync('./hc_boxplot_is_red.js', 'utf8'));

const barSvg = chartToSvg(barChartConfig);
const boxSvg = chartToSvg(boxPlotConfig);

// 创建PDF并添加SVG
const doc = new jsPDF('p', 'mm', 'A4');
const pageWidth = doc.internal.pageSize.getWidth();

// 添加第一个图表（柱状图）
doc.addSVG(barSvg, 15, 20, pageWidth - 30, 150);
// 添加第二个图表（箱线图），设置位置在第一个图表下方
doc.addSVG(boxSvg, 15, 180, pageWidth - 30, 150);

// 保存PDF
doc.save('./combined-charts.pdf');
console.log('PDF生成完成：combined-charts.pdf');

3. 执行转换命令

node svg-to-pdf.js

关键注意事项 #

• 箱线图必须加载highcharts-more.js模块，两个方案中都已配置，解决之前的missingModuleFor: boxplot错误
• Puppeteer方案会完整渲染图表样式，包括背景色、动态效果（导出PDF时无需交互，但渲染准确性更高）
• 若需要调整图表位置或分页，可修改脚本中的CSS样式（Puppeteer方案）或SVG坐标（jsPDF方案）

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