Flask+Chart.js报表无法被wkhtmltopdf渲染问题求助

我基于Flask框架开发应用，使用Chart.js及基础JavaScript生成带图表的报表页面。该页面在浏览器中可正常显示数据，但wkhtmltopdf无法渲染内容，仅展示HTML结构。尝试过限制图表区域尺寸、添加JavaScript延迟、关闭动画等操作，均无效果。

浏览器中无任何警告，但wkhtmltopdf抛出以下错误：

Warning: https://cdn.jsdelivr.net/npm/chart.js:13 SyntaxError: Parse error
Warning: http://localhost:8069/xpf_reporting/report:72 SyntaxError: Parse error

语法错误出现在data.forEach(lead => {}这一行。

疑问：是否wkhtmltopdf对语法要求更严格？有没有体积更小、适配性更好的图表库可选？因环境限制必须使用wkhtmltopdf，但可自行引入JS。

核心问题：wkhtmltopdf的JavaScript引擎版本过低 #

wkhtmltopdf默认使用旧版WebKit内核，对ES6及以上语法支持有限，箭头函数=>、const/let块级作用域、扩展运算符...等特性都无法解析，这就是语法错误的直接原因。

1. 修复JavaScript语法，降级到ES5标准 #

把所有ES6语法替换为ES5兼容写法：

• 箭头函数=>替换为function()写法
• const/let替换为var
• 用ES5逻辑替代Set、扩展运算符等特性

代码修改示例：

原ES6写法：

data.forEach(lead => {
    const icName = lead.user.name;
    const expectedRevenue = lead.expected_revenue;
    if (!icTotalSum[icName]) {
        icTotalSum[icName] = 0
    }
    icTotalSum[icName] += expectedRevenue;
});

ES5兼容写法：

data.forEach(function(lead) {
    var icName = lead.user.name;
    var expectedRevenue = lead.expected_revenue;
    if (!icTotalSum[icName]) {
        icTotalSum[icName] = 0
    }
    icTotalSum[icName] += expectedRevenue;
});

原ES6的Set去重逻辑：

const stages = [...new Set(data.map(lead => lead.stage.stage))];

ES5等价写法：

var stages = [];
data.forEach(function(lead) {
    var stage = lead.stage.stage;
    if (stages.indexOf(stage) === -1) {
        stages.push(stage);
    }
});

2. 更换兼容ES5的Chart.js版本 #

新版Chart.js（3.x及以上）大量使用ES6+特性，旧WebKit内核无法加载，建议切换到Chart.js 2.x系列（最后一个稳定版为2.9.4），这个版本完全兼容ES5。

替换引入的Script标签：

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>

3. 适配wkhtmltopdf的额外参数 #

即使修复了语法，wkhtmltopdf可能需要更多时间完成JS渲染，添加以下参数确保图表生成：

wkhtmltopdf --javascript-delay 3000 --no-stop-slow-scripts your_report.html output.pdf

• --javascript-delay 3000：等待3秒再触发渲染，给JS足够时间处理数据
• --no-stop-slow-scripts：禁止终止慢脚本执行

4. 替代图表库推荐（体积小、兼容性好） #

如果不想折腾Chart.js，这些轻量库更适配旧环境：

• Chartist.js：体积仅10KB左右，用SVG渲染，语法简洁，完全兼容ES5，支持柱状图、折线图等基础图表。
• Frappe Charts：轻量（~15KB），API简单，支持响应式，Canvas渲染，兼容性强。
• Google Charts：提供ES5兼容版本，图表类型丰富，文档完善。

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