使用html2canvas与jsPDF生成PDF时文字丢失空格、排版错位如何解决

问题根因 #

文字空格丢失的核心问题出在html2canvas的字符宽度计算逻辑，它对CJK字符、自定义字体的空格、字间距识别存在原生缺陷，该问题和jsPDF无关。

可落地修复方案 #

• 给需要转PDF的DOM节点强制添加兜底样式，优先使用系统通用字体，明确设置字符间距规则：

[id^="html2Pdf-"] * {
  font-family: "Microsoft Yahei", "PingFang SC", sans-serif !important;
  letter-spacing: 0.5px !important;
  word-spacing: 1px !important;
  white-space: pre-wrap !important;
}

• 修正代码中的隐式格式转换问题：你当前用canvas.toDataURL("image/PNG")导出PNG后，调用addImage时指定了JPEG格式，压缩会导致字符边缘模糊，进一步加剧视觉上的字间距异常，修改对应代码为：

// 直接导出高清晰度JPG
const imgData = canvas.toDataURL("image/jpeg", 1.0);
doc.addImage(
  imgData,
  "JPEG",
  bufferX,
  bufferY,
  pdfWidth,
  pdfHeight,
  undefined,
  "MEDIUM" // 不要用FAST压缩模式，精度不足会丢失字符细节
);

• 给html2canvas配置添加foreignObjectRendering: true参数，优先调用浏览器原生渲染能力提升字符还原度：

const options = {
  background: "white",
  scale: 3,
  useCORS: true, // 若存在外部字体、图片资源需添加该配置
  foreignObjectRendering: true // 核心修复参数，优先走浏览器原生渲染
};

• 若以上方案仍未解决，可在调用html2canvas前先把目标DOM内的所有普通空格替换为非断空格 ，渲染完成后再还原DOM内容即可。

额外优化建议 #

你现有addPage方法最后那段生成ArrayBuffer的逻辑是完全冗余的，你已经通过doc.addImage写入了PDF内容，这段代码不会对最终生成的PDF产生任何影响，直接删除即可，还能大幅提升导出速度。

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