Wkhtmltopdf渲染时JavaScript异常导致长标题未自动缩小问题求助

针对现有wkhtmltopdf流程的修复方法 #

• 替换宽度计算逻辑：放弃offsetWidth取值，改用RangeAPI获取文本实际渲染宽度，不受div固定尺寸限制，示例实现如下：

function getActualTextWidth(el) {
  const range = document.createRange();
  range.selectNodeContents(el);
  const contentRect = range.getBoundingClientRect();
  return contentRect.width;
}

把原来判断宽度的逻辑替换为调用该函数取值，即可触发字体缩小逻辑。

• 补充CSS兼容样式：给id为name的标题元素添加以下样式，强制元素宽度随内容撑开：

#name {
  white-space: nowrap;
  display: inline-block;
  width: auto !important;
}

• 调整wkhtmltopdf调用参数：启动时添加--enable-javascript --javascript-delay 1000 --no-stop-slow-scripts参数，确保JS逻辑完全执行完成后再开始渲染。

替代HTML转PNG实现方案 #

• Playwright/Puppeteer：基于Chromium内核渲染，行为和普通桌面浏览器完全一致，不需要调整现有JS/CSS逻辑即可正常渲染，Python侧集成成本极低，示例调用代码：

from playwright.sync_api import sync_playwright

# 按你的卡牌实际尺寸调整视口宽高
CARD_WIDTH = 250
CARD_HEIGHT = 350

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page(viewport={"width": CARD_WIDTH, "height": CARD_HEIGHT})
    # 加载本地HTML文件
    page.goto(f"file:///your/local/path/to/card.html")
    # 截图保存
    page.screenshot(path="output/card.png", full_page=True)
    browser.close()

• WeasyPrint：纯Python实现的HTML渲染工具，不需要依赖外部浏览器二进制文件，适合轻量场景，如果你的自适应需求可以用CSS实现（例如使用clamp()动态设置字体大小），可以直接替换wkhtmltopdf使用。

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