由于 javascript 问题，Wkhtmltopdf 渲染错误

Question

我正在从事纸牌游戏，我决定创建一个 python 脚本来加快原型设计。这就是脚本的作用：

1. 它使用 jinja 填充 HTML 模板。
2. 它使用 wkhtmltopdf 渲染 HTML 页面并使用 scikitimage 裁剪图像。
3. 它使用 FPDF 创建每页 9 张卡片的 PDF。

所有代码都可以在这里找到：card-generator。

我还添加了一些 javascript 以在标题过长时减小字体大小。此 javascript 代码可在 card-generator/assets/script.js 中找到。这段代码的作用是获取带有id='name' 的 div 并减小字体大小，直到其大小加上边距小于父大小。

问题是，虽然这个 javascript 在从浏览器打开时可以完美运行，但在使用 wkhtmltopdf 呈现时它的行为并不像预期的那样。据我所知，wkhtmltopdf 使用 qute 浏览器渲染图像，当使用 qute 浏览器打开时，卡片看起来很好。这是使用 qute 浏览器打开文件 card-generator/html_out/Too looong title.html 时的样子：

这是用 qute 浏览器打开的同一个 html，但在 card-generator/assets/script.js 中注释了负责调整大小的 while 循环：

这就是文件card-generator/png_out/Too looong title_1.png 的外观。这个png是之前html渲染的结果：

要复制问题，只需打开 python 笔记本 (.ipynb) 并执行单元格。

如您所见，标题未调整大小。我发现问题在于标题的 div 不随文本增长，如上一张图片所示。文本溢出，所以当我在 JS 中使用element.offsetWidth 获得尺寸时，它不会返回文本的大小，而是返回 div 的大小，非常适合。这会导致无法调整字体大小。

我看到其他 wkhtmltopdf 用户抱怨类似的问题，但我已经尝试了所有方法，但似乎没有任何东西可以解决这个问题。欢迎使用其他将 HTML 呈现为 PNG 的选项。

Answer 1

使用 pyppeteer 代替 wkhtmltopdf 可以解决问题。