Python中使用pdfkit生成PDF时无法渲染Konva.js图表问题求助

核心原因 #

pdfkit依赖的wkhtmltopdf对现代JavaScript（尤其是Konva这类基于Canvas的绘图库）支持有限：

• 默认在JS未完全执行、图表未绘制完成时就生成PDF
• 无头环境下可能未正确初始化Canvas渲染上下文

方案1：调整wkhtmltopdf参数，延迟JS渲染 #

给wkhtmltopdf足够时间让Konva完成图表绘制，同时启用必要的JS支持：

import pdfkit

html_content = """
<!-- 你的HTML内容，包含Konva.js脚本和动态传值的绘图函数 -->
"""

# 设置wkhtmltopdf参数
options = {
    'enable-javascript': True,
    'javascript-delay': 3000,  # 延迟3秒，可根据图表复杂度调整
    'disable-smart-shrinking': True,  # 避免压缩布局破坏Canvas
    'no-stop-slow-scripts': True,  # 不终止慢脚本
}

pdfkit.from_string(html_content, 'output.pdf', options=options)

方案2：用Playwright替代pdfkit（推荐） #

Playwright对现代JS和Canvas的支持远优于wkhtmltopdf，能完整渲染Konva图表：

1. 安装依赖：

pip install playwright
playwright install chromium

2. 示例代码：

from playwright.sync_api import sync_playwright

html_content = """
<!-- 你的HTML内容，包含Konva.js脚本和动态传值的绘图函数 -->
"""

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()
    # 加载HTML并等待网络空闲，确保JS资源加载完成
    page.set_content(html_content, wait_until="networkidle")
    # 可选：如果图表是异步绘制的，在你的JS代码里添加全局标记（比如window.konvaChartReady = true），再用下面的代码等待
    # page.wait_for_function("window.konvaChartReady === true")
    
    # 生成PDF
    page.pdf(path='output.pdf', format='A4')
    browser.close()

方案3：提前将Konva图表转为图片嵌入HTML #

如果必须保留pdfkit，可以先把Konva图表转成图片，再嵌入HTML：

1. 用Playwright生成图表的base64图片：

from playwright.sync_api import sync_playwright

chart_html = """
<!-- 仅包含Konva绘图逻辑的HTML片段 -->
"""

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()
    page.set_content(chart_html, wait_until="networkidle")
    # 获取Canvas的base64图片
    base64_img = page.evaluate("""() => {
        const canvas = document.querySelector('canvas');
        return canvas.toDataURL('image/png');
    }""")
    browser.close()

2. 将base64图片替换原HTML中的Konva容器，再用pdfkit生成PDF：

final_html = html_content.replace('<div id="konva-container"></div>', f'<img src="{base64_img}" />')
pdfkit.from_string(final_html, 'output.pdf')

内容的提问来源于stack exchange，提问作者Sanju biju varghese