如何在jspdf autotable中实现数据的多行显示？

阿华AIGC实验室

2026-5-15

解决jspdf-autotable实现数据多行显示的问题

看起来你是想让每条经验的多个信息在表格里以多行形式展示，目前你的代码会把field2、field5_date、field4各自单独作为一行，这应该不是你想要的效果。这里有两种常见的实现方式，根据你的实际需求选择：

场景1：同一单元格内多行显示所有字段

如果你的需求是把每条数据的三个字段放在同一个单元格内换行展示（对应你当前只有EXPERIENCE一列的情况），可以把多个字段用换行符\n拼接成一个字符串，同时开启autotable的自动换行配置：

var item1 = this.dataa; 
var columns1 = ["EXPERIENCE"]; 
var rows1 = []; 

for(let i=0; i<item1.length; i++){ 
  // 将三个字段用换行符拼接，实现同一单元格内多行
  var experienceContent = `${item1[i].field2}\n${item1[i].field5_date}\n${item1[i].field4}`;
  rows1.push([experienceContent]); 
} 

doc.autoTable(columns1, rows1, { 
  margin: {left:300},
  styles: {
    cellPadding: 5, // 增加单元格内边距，让排版更美观
    wrap: true // 开启单元格内容自动换行，这是关键配置
  }
}); 

doc.save('Test.pdf');

关键说明：

原来的代码中，你每次循环push三个独立的数组（temp1、temp2、temp5），这会让每个字段成为表格的单独一行，而不是同一单元格内的多行。
通过\n拼接字符串，并设置styles.wrap: true，可以让单元格内的内容自动换行显示。

场景2：多列分别显示每个字段

如果你希望每个字段对应单独的列，同时允许列内内容过长时自动换行，可以修改列配置并调整行数据的结构：

var item1 = this.dataa; 
// 定义多列的表头
var columns1 = ["Experience Details", "Date", "Description"]; 
var rows1 = []; 

for(let i=0; i<item1.length; i++){ 
  // 将三个字段放在同一个数组中，作为表格的一行数据
  rows1.push([item1[i].field2, item1[i].field5_date, item1[i].field4]); 
} 

doc.autoTable(columns1, rows1, { 
  margin: {left:300},
  styles: {
    cellPadding: 5,
    wrap: true // 开启所有单元格的自动换行
  },
  // 也可以单独为某一列配置换行
  columnStyles: {
    0: { wrap: true }, // 第一列开启换行
    1: { wrap: true }, // 第二列开启换行
    2: { wrap: true }  // 第三列开启换行
  }
}); 

doc.save('Test.pdf');