使用Angular+jsPDF Autotable生成PDF时如何让指定表格不折列占满页宽

你之前配置horizontalPageBreak没生效的核心原因是没有关闭单元格默认的内容折行规则，autotable默认会优先压缩列宽、折行内容来适配页面宽度，不会主动触发横向溢出换行。

• 第一步：基础配置调整，关闭单元格自动折行
  在autotable配置中添加列样式规则，强制单元格宽度跟随内容、内容不折行：

import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';

// 初始化PDF实例
const doc = new jsPDF();
const pageMargin = 10;
const pageAvailableWidth = doc.internal.pageSize.getWidth() - pageMargin * 2;

autoTable(doc, {
  head: [你的表格表头数组],
  body: 你的表格数据数组,
  margin: pageMargin,
  // 强制所有单元格不折行，宽度自适应内容
  columnStyles: {
    // 按列索引配置，有多少列就配置多少项
    0: { cellWidth: 'auto', overflow: 'visible' },
    1: { cellWidth: 'auto', overflow: 'visible' },
    2: { cellWidth: 'auto', overflow: 'visible' }
  },
  // 开启横向溢出换行
  horizontalPageBreak: true,
  // 如果需要第一列在每一行块都重复展示，就加下面这行，不需要则删除
  horizontalPageBreakRepeat: 0
})

doc.save('导出文件.pdf');

• 第二步：自定义布局适配（如果基础配置不生效）
  如果你的表格内容宽度计算有偏差，可以通过钩子函数手动控制换行逻辑：

autoTable(doc, {
  head: [你的表格表头数组],
  body: 你的表格数据数组,
  margin: pageMargin,
  tableWidth: 'auto',
  // 单元格解析钩子，强制设置最小宽度
  didParseCell: (data) => {
    data.cell.styles.cellPadding = 2;
    // 根据你的字体大小调整系数，确保单元格宽度足够放下完整内容
    data.cell.styles.minCellWidth = data.cell.content.toString().length * 2.5;
  },
  // 页面渲染钩子，超出页宽的表格块自动往下偏移
  didDrawPage: (data) => {
    if (data.cursor) {
      autoTable(doc, {
        ...你的表格原有配置,
        startY: data.cursor.y + 15 // 偏移量适配表头高度，可自定义调整
      })
    }
  }
})

• 第三步：Angular环境版本适配
  如果配置全部正确还是不生效，检查依赖版本是否匹配，推荐使用以下稳定版本组合：

"dependencies": {
  "jspdf": "^2.5.1",
  "jspdf-autotable": "^3.5.29"
}

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