使用html2canvas和jsPDF生成PDF时表格列文本被截断，如何实现自动换行？

你遇到的核心问题是：html2canvas将DOM元素转为图片时，表格列内的文本未在DOM中正确换行，导致生成的图片截断内容，最终PDF里显示不完整。结合你的代码，可从以下几个方向修复：

1. 确保DOM中表格的CSS样式支持自动换行 #

如果DOM里表格文本本身就没换行，html2canvas转出来的图片自然会截断。给表格及单元格添加以下CSS，强制文本按列宽换行：

.table-container table {
  table-layout: fixed; /* 固定列宽，确保文本按列宽换行 */
  width: 100%;
}
.table-container td, .table-container th {
  word-wrap: break-word; /* 强制长单词换行 */
  white-space: normal; /* 允许文本换行，覆盖默认nowrap */
  overflow-wrap: break-word;
  padding: 8px; /* 避免文本贴边截断 */
}

2. 调整html2canvas渲染配置，避免内容截断 #

html2canvas可能因元素overflow属性或视口问题，无法捕获完整表格内容。修改html2canvas调用参数，临时移除可能导致截断的样式：

const sectionCanvas = await html2canvas(section, {
  scale: 4,
  useCORS: true,
  scrollX: 0,
  scrollY: 0,
  // 克隆DOM时强制显示所有内容
  onclone: (clonedDoc) => {
    const elements = clonedDoc.querySelectorAll('.section, .non-section, table, td');
    elements.forEach(el => {
      el.style.overflow = 'visible';
      el.style.maxHeight = 'none';
    });
  }
});

3. 修正PDF中图片高度的计算逻辑 #

你的代码会用行内最高元素高度统一设置行高，可能压缩表格的显示高度。改为保留每个section的真实渲染高度，再取最大值作为行高：

// 处理行内section时，保留每个section的真实pdf高度
for (const rowSection of rowSections) {
  pdf.addImage(
    rowSection.imgData,
    'PNG',
    positionX,
    positionY,
    rowSection.pdfImgWidth,
    rowSection.pdfImgHeight // 使用自身高度，而非统一行高
  );
  positionX += rowSection.pdfImgWidth + elementMargin;
}

// 取当前行最高section的高度作为行间距
const maxRowHeight = Math.max(...rowSections.map(s => s.pdfImgHeight));
positionY += maxRowHeight + elementMargin;
currentPageHeight -= maxRowHeight + elementMargin;

4. 验证DOM中表格的实际尺寸 #

在调用html2canvas前，打印表格的实际高度，确认前端页面中表格是否已经正确撑开：

console.log('表格实际高度:', section.querySelector('table')?.offsetHeight);

如果DOM中的表格高度已经是截断状态，必须先修复前端页面的样式，再进行PDF生成。

内容的提问来源于stack exchange，提问作者Srushti Sonawane