html2pdf转换PDF时HTML与PDF样式不一致问题求助

我开发了一个接收输入、执行计算并输出结果的JavaScript网页应用，用html2pdf转换PDF时，大部分复杂样式都能正常渲染，但动态插入的特定HTML内容会出现样式丢失：

动态插入的代码如下：

paragraph.innerHTML = `
  <strong>test text</strong> (test text test text)
    <ul>
      <li>${rangeA} to ${rangeB} mL/day</li>
      <strong>OR</strong>
      <li>${roundDownToEvenTenths(rangeA/2.0)} to ${roundDownToEvenTenths(rangeB/2.0)} mL twice a day</li>
    </ul>
  <strong>test text test text</strong> test test test
    <ul>
      <li>${rangeA} to ${rangeC} mL/day</li>
      <strong>OR</strong>
      <li>${roundDownToEvenTenths(rangeA/2.0)} to ${roundDownToEvenTenths(rangeC/2.0)} mL twice a day</li>
  </ul>`;

将这些内容动态插入后，通过类/ID获取元素生成PDF时，仅在关闭无序列表后添加文本的场景下，PDF显示样式异常——浏览器里显示正常，但PDF里样式错乱。

已尝试以下方法但无效：

• 在列表间添加换行元素
• 将HTML字符串压缩为单行排除空格问题
• 直接在html2pdf的HTML中插入所需CSS
• 检查CSS和HTML语法，未发现错误

需求：让PDF显示和浏览器一致，不更换html2pdf工具。

1. 修正HTML结构（核心问题） #

你的HTML存在无效嵌套：<strong>OR</strong>直接放在<ul>标签内，不属于任何<li>，浏览器会自动修正这种错误，但html2pdf的渲染引擎对这种不规范结构的兼容性很差。

把OR包裹到<li>里，同时可以用CSS调整样式让它和普通列表项区分：

paragraph.innerHTML = `
  <strong>test text</strong> (test text test text)
    <ul>
      <li>${rangeA} to ${rangeB} mL/day</li>
      <li class="or-item"><strong>OR</strong></li>
      <li>${roundDownToEvenTenths(rangeA/2.0)} to ${roundDownToEvenTenths(rangeB/2.0)} mL twice a day</li>
    </ul>
  <strong>test text test text</strong> test test test
    <ul>
      <li>${rangeA} to ${rangeC} mL/day</li>
      <li class="or-item"><strong>OR</strong></li>
      <li>${roundDownToEvenTenths(rangeA/2.0)} to ${roundDownToEvenTenths(rangeC/2.0)} mL twice a day</li>
  </ul>`;

对应的CSS：

.or-item {
  list-style: none; /* 去掉项目符号 */
  font-weight: bold;
  text-align: center; /* 可选，让OR居中 */
  margin: 0.5em 0;
}

2. 强制html2pdf读取完整样式 #

html2pdf有时会遗漏动态加载的CSS，你可以通过两种方式确保样式被正确读取：

方法A：注入页面样式表

const element = document.getElementById('your-target-element');
const opt = {
  margin: 1,
  filename: 'result.pdf',
  image: { type: 'jpeg', quality: 0.98 },
  html2canvas: { scale: 2 },
  jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
  // 强制注入页面内的所有样式内容
  css: document.querySelector('style').textContent
};

html2pdf().set(opt).from(element).save();

方法B：转为内联样式

用JavaScript把目标元素的计算样式转为内联样式，避免html2pdf遗漏：

function inlineStyles(element) {
  const computed = window.getComputedStyle(element);
  for (let prop of computed) {
    element.style[prop] = computed[prop];
  }
  // 递归处理所有子元素
  Array.from(element.children).forEach(child => inlineStyles(child));
}

const targetElement = document.getElementById('your-target-element');
inlineStyles(targetElement);

// 生成PDF
html2pdf().from(targetElement).save();

3. 优化html2canvas渲染配置 #

html2pdf依赖html2canvas渲染页面，调整以下配置可解决部分渲染异常：

const opt = {
  html2canvas: {
    scale: 3, // 提高渲染分辨率，避免文本模糊
    letterRendering: true, // 优化文本渲染逻辑
    useCORS: true
  }
};

html2pdf().set(opt).from(element).save();

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