Angular项目中jsPDF导出内容单词空格显示异常问题求助

问题根源分析 #

jsPDF通过html()方法转换DOM时，空格异常通常来自三个方面：宽度设置不合理导致文本挤压、默认字体对空格渲染支持不足、HTML样式未适配PDF导出场景。

具体修复方案 #

1. 调整导出宽度与纸张适配 #

原代码中width:100过小，会导致文本强制挤压变形，需根据纸张尺寸计算合理的导出宽度：

• A2纸张的pt单位宽度为1190，减去左右内边距后设置导出宽度，避免内容贴边或挤压。

2. 优化字体渲染 #

默认字体可能对英文单词空格处理不佳，建议嵌入标准无衬线字体（如Roboto），确保空格与字符的间距正常。

3. 适配HTML导出样式 #

给目标容器添加PDF专属样式，统一行高、字间距，避免inline样式冲突。

修改后的代码示例 #

const doc = new jsPDF("p", "pt", "a2");
const source = document.getElementById("content");

// 计算页面可用宽度（左右各留40pt内边距）
const pageWidth = doc.internal.pageSize.getWidth();
const margin = 40;
const exportWidth = pageWidth - margin * 2;

// 可选：嵌入自定义字体（需提前将字体文件放入项目并引入）
// doc.addFont('assets/fonts/Roboto-Regular.ttf', 'Roboto', 'normal');
// doc.setFont('Roboto');

doc.setFontSize(12);
doc.html(source, {
  width: exportWidth,
  margin: margin,
  callback: function(pdf) {
    pdf.save(`${userName}-${date}.pdf`);
  },
  // 提升转换清晰度与渲染质量
  html2canvas: {
    scale: 2,
    useCORS: true,
    logging: false
  }
});

额外格式优化建议 #

• 添加打印专用CSS样式：

@media print {
  #content {
    line-height: 1.5;
    word-spacing: normal;
    letter-spacing: 0.5px;
    font-family: 'Roboto', sans-serif;
  }
  #content p {
    margin-bottom: 12pt;
  }
  #content img {
    max-width: 100%;
    height: auto;
  }
  #content pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}

• 确保长文本自动换行：给包含长单词/URL的元素添加word-wrap: break-word样式，避免超出页面。
• 测试不同浏览器环境：html2canvas在不同浏览器中的渲染差异可能导致格式问题，建议在目标浏览器中测试。

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