Spring Boot+Thymeleaf生成PDF报表图表为空问题求助

问题根源 #

Google Charts、HighCharts这类前端图表库依赖浏览器JS引擎渲染，但常规的PDF生成工具（如Flying Saucer）仅解析静态HTML/CSS，不会执行JavaScript，导致图表区域为空。

可行解决方案 #

方案1：使用支持JS渲染的PDF生成工具 #

推荐用wkhtmltopdf或Headless Chrome，它们能模拟浏览器环境执行JS后再生成PDF。

以wkhtmltopdf为例，Spring Boot中集成步骤：

• 安装wkhtmltopdf到服务器/本地环境
• 在项目中调用命令行工具执行转换：

// 示例代码：调用wkhtmltopdf生成PDF
ProcessBuilder pb = new ProcessBuilder(
    "wkhtmltopdf",
    "--enable-javascript",
    "--javascript-delay", "3000", // 等待JS渲染完成，时间按需调整
    "file:///path/to/generated/thymeleaf.html",
    "/path/to/output.pdf"
);
pb.start().waitFor();

Thymeleaf模板中正常引入Google Charts/HighCharts的JS和渲染代码即可，确保图表在页面加载完成后初始化（比如用window.onload或$(document).ready()）。

方案2：后端生成图表图片嵌入PDF #

如果不想依赖外部工具，可在Java后端生成图表图片，再通过Thymeleaf嵌入HTML后转PDF。

以JFreeChart为例：

1. 添加Maven依赖：

<dependency>
    <groupId>org.jfree</groupId>
    <artifactId>jfreechart</artifactId>
    <version>1.5.3</version>
</dependency>

2. 后端生成图表图片并转为Base64：

// 生成柱状图示例
DefaultCategoryDataset dataset = new DefaultCategoryDataset();
dataset.addValue(10, "销量", "产品A");
dataset.addValue(20, "销量", "产品B");
JFreeChart chart = ChartFactory.createBarChart(
    "产品销量汇总",
    "产品",
    "销量",
    dataset,
    PlotOrientation.VERTICAL,
    false, false, false
);
// 转为Base64字符串
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ChartUtilities.writeChartAsPNG(baos, chart, 600, 400);
String chartBase64 = Base64.getEncoder().encodeToString(baos.toByteArray());
// 将base64字符串传入Thymeleaf模板
model.addAttribute("chartBase64", chartBase64);

3. Thymeleaf模板中嵌入图片：

<img src="data:image/png;base64,${chartBase64}" alt="销量汇总图" />

之后用Flying Saucer等工具转PDF即可正常显示图表。

方案3：调整现有PDF工具的JS支持（有限） #

部分工具如Flying Saucer的最新版本支持有限的JS，但对现代图表库兼容性差。若尝试此方案，需：

• 升级到最新版Flying Saucer
• 启用JS支持：

ITextRenderer renderer = new ITextRenderer();
renderer.getSharedContext().setPrint(true);
renderer.getSharedContext().setInteractive(false);
renderer.getSharedContext().getUserAgentCallback().setJavaScriptEnabled(true);
// 加载HTML后渲染
renderer.setDocumentFromString(htmlContent);
renderer.layout();
renderer.createPDF(outputStream);

但此方法对Google Charts/HighCharts的支持不稳定，不推荐用于复杂图表。

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