使用jsPDF将HTML转PDF时列表项目符号与序号丢失问题求助

问题原因 #

html2canvas在渲染脱离当前DOM树的元素（比如通过DOMParser生成的独立文档节点）时，无法读取浏览器默认的列表样式（UA样式），导致有序列表的序号、无序列表的项目符号无法被捕获渲染。

修复方案 #

方案1：给列表添加显式内联/嵌入样式 #

在解析后的HTML中，为<ol>和<ul>添加明确的list-style属性，确保样式被html2canvas识别：

修改代码如下：

function BlazorDownloadFile(filename, text) {
  let parser = new DOMParser();
  let doc = parser.parseFromString(text, "text/html");

  // 给所有列表添加显式样式
  const ols = doc.querySelectorAll('ol');
  ols.forEach(ol => {
    ol.style.listStyleType = 'decimal'; // 有序列表显式设置序号样式
  });
  const uls = doc.querySelectorAll('ul');
  uls.forEach(ul => {
    ul.style.listStyleType = 'disc'; // 无序列表显式设置项目符号样式
  });

  const element = doc.body;

  var opt = {
    margin: 1,
    filename: filename,
    html2canvas: { scale: 2, useCORS: true },
    jsPDF: { unit: "cm", format: "a4", orientation: "portrait" },
  };
  html2pdf().set(opt).from(element).save();
}

方案2：将解析后的元素临时插入当前DOM再渲染 #

把生成的文档节点临时添加到页面中，让它能获取完整的浏览器样式上下文，渲染完成后再移除：

function BlazorDownloadFile(filename, text) {
  let parser = new DOMParser();
  let doc = parser.parseFromString(text, "text/html");
  const element = doc.body;

  // 临时插入到当前页面DOM
  const tempContainer = document.createElement('div');
  tempContainer.style.display = 'none';
  tempContainer.appendChild(element);
  document.body.appendChild(tempContainer);

  var opt = {
    margin: 1,
    filename: filename,
    html2canvas: { scale: 2 },
    jsPDF: { unit: "cm", format: "a4", orientation: "portrait" },
    // 渲染完成后移除临时元素
    onAfterSave: () => {
      document.body.removeChild(tempContainer);
    }
  };

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

方案3：使用自定义CSS重置列表样式 #

如果上述方案无效，可以在解析的HTML头部添加自定义样式表，强制设置列表样式：

function BlazorDownloadFile(filename, text) {
  // 在HTML文本开头添加自定义样式
  const styledText = `
    <style>
      ol { list-style-type: decimal !important; padding-left: 20px; }
      ul { list-style-type: disc !important; padding-left: 20px; }
      li { margin: 5px 0; }
    </style>
    ${text}
  `;
  
  let parser = new DOMParser();
  let doc = parser.parseFromString(styledText, "text/html");
  const element = doc.body;

  var opt = {
    margin: 1,
    filename: filename,
    html2canvas: { scale: 2 },
    jsPDF: { unit: "cm", format: "a4", orientation: "portrait" },
  };
  html2pdf().set(opt).from(element).save();
}

额外提示 #

• 确保原HTML中的列表没有被CSS重置list-style: none，如果有需要覆盖该样式
• 调整html2canvas的scale参数可以优化PDF的清晰度
• 若列表包含嵌套结构，需要确保嵌套的<ol>/<ul>也被设置了对应的样式

内容的提问来源于stack exchange，提问作者hanushi-thana