React中用jsPDF生成PDF时换行出现多余空格的问题求助

问题分析 #

你遇到的Transaction ID字段末尾多余空格，大概率是两个原因：要么数据源的uuid本身带首尾空格，要么是jsPDF-autoTable渲染单元格时因换行或样式设置引入了额外空格。

解决方案 #

1. 清洗数据源，去除首尾空格 #

在向finalData中添加uuid时，直接用trim()清除首尾空格：

if (Object.prototype.hasOwnProperty.call(item, "uuid")) {
  arr.push(item.uuid.trim()) // 新增trim()处理
}

2. 自定义单元格渲染，强制清理文本 #

如果数据源本身没问题，可通过autoTable的didParseCell钩子统一处理目标列的文本：

autoTable(doc, {
  head: head,
  body: finalData,
  columnStyles: {
    0: { cellWidth: 10 },
    1: { cellWidth: 38 },
    5: { cellWidth: 15 }
  },
  // 新增单元格解析钩子
  didParseCell: (data) => {
    // 针对Transaction ID列（索引1）清理文本
    if (data.column.index === 1) {
      data.cell.text = data.cell.text.trim();
    }
  }
})

3. 调整列宽，避免强制换行导致的空格 #

检查columnStyles中第1列的cellWidth是否过小，导致内容被强制换行时引入多余空格。可以尝试适当调大宽度：

columnStyles: {
  0: { cellWidth: 10 },
  1: { cellWidth: 45 }, // 调大列宽
  5: { cellWidth: 15 }
}

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