如何用jsPDF autoTable适配PDF文档并实现单元格文本自动换行？

嘿，我之前也遇到过这个问题！jsPDF autoTable的文本截断确实挺闹心的，不过通过几个简单的配置就能解决自动换行的需求，给你分享几个实用的方案：

1. 全局开启自动换行+自动适配单元格宽度 #

这是最通用的解法，直接给autoTable配置wrap: true开启文本换行，同时设置cellWidth: 'auto'让单元格根据内容自动调整宽度，避免文本被截断：

function demoFromHTML(source) {
  var columns = ["PatientNumber", "PatientName", "Prescription", "MobileNumber", "Address", "DatePrescribed"];
  var doc = new jsPDF('p', 'pt');
  
  doc.autoTable({
    head: [columns], // 注意这里要把columns放在数组里作为表头
    body: source,
    // 核心配置
    wrap: true, // 强制单元格文本自动换行
    cellWidth: 'auto' // 让单元格宽度适配内容
  });
  
  doc.save('patient-prescriptions.pdf');
}

如果想要手动控制部分列的宽度，也可以给cellWidth传数组，比如cellWidth: [80, 100, 'auto', 80, 'auto', 100]，对应每一列的宽度，灵活度更高。

2. 针对长文本列单独配置 #

如果只有特定几列（比如Prescription、Address这种容易出现长文本的列）需要换行，用columnStyles给指定列单独设置样式更精准：

function demoFromHTML(source) {
  var columns = ["PatientNumber", "PatientName", "Prescription", "MobileNumber", "Address", "DatePrescribed"];
  var doc = new jsPDF('p', 'pt');
  
  doc.autoTable({
    head: [columns],
    body: source,
    columnStyles: {
      2: { cellWidth: 200, wrap: true }, // 第3列（索引从0开始）：Prescription
      4: { cellWidth: 250, wrap: true }  // 第5列：Address
    }
  });
  
  doc.save('patient-prescriptions.pdf');
}

3. 调整表格整体尺寸适配页面 #

如果表格整体宽度超出了PDF页面，也会导致文本被截断，这时候可以通过设置边距和表格宽度来让它适配页面：

function demoFromHTML(source) {
  var columns = ["PatientNumber", "PatientName", "Prescription", "MobileNumber", "Address", "DatePrescribed"];
  var doc = new jsPDF('p', 'pt');
  var pageWidth = doc.internal.pageSize.width;
  
  doc.autoTable({
    head: [columns],
    body: source,
    wrap: true,
    margin: { top: 60, right: 30, bottom: 30, left: 30 }, // 设置页面边距
    width: pageWidth - 60 // 表格宽度 = 页面宽度 - 左右边距之和
  });
  
  doc.save('patient-prescriptions.pdf');
}

另外要注意，确保你使用的是较新版本的jspdf-autotable插件，旧版本可能不支持这些配置项，建议通过npm安装最新版：npm install jspdf jspdf-autotable

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