React项目中使用jsPDF-AutoTable导出产品数据PDF时，如何将同行元素拆分至不同行

我来帮你搞定这个问题——你当前代码的核心问题出在**rows数组的构建方式上**：你把所有商品名称打包成了一个数组，所有销量也打包成了另一个数组，然后把这两个数组作为一行的两列内容，自然所有数据都挤在同一行了。

正确的思路是：给每个商品单独生成一行数据。咱们可以通过遍历products数组，把每个商品对象转换成一个包含name和sold的子数组，这样rows就会是由多个行数据组成的数组，对应PDF里的多行内容。

下面是修改后的完整代码：

const doc = new jsPDF();
// 商品数据对象
const products = [
  { name: "computador", sold: 21 },
  { name: "Keyboard", sold: 23 },
  { name: "Mouse", sold: 77 },
  { name: "HD", sold: 25 },
  { name: "SSD", sold: 12 }
];
// 打印导出函数
const Print = () => {
  // 若不需要从页面的#my-table导出表格，可删除此行
  // doc.autoTable({ html: "#my-table" });
  
  const columns = ["Name", "Sold"];
  // 关键修改：遍历products生成每行的独立数据
  const rows = products.map(item => [item.name, item.sold]);
  
  doc.autoTable(columns, rows);
  doc.save("table.pdf");
};

关键细节说明： #

• products.map(item => [item.name, item.sold]) 会将每个商品对象转换为["商品名称", 销量]格式的数组，最终rows会包含5个这样的子数组，每个子数组对应PDF里的一行内容。
• 如果你的场景不需要导出页面上的#my-table表格，记得删掉doc.autoTable({ html: "#my-table" });这行，避免PDF中出现重复的表格内容。

修改后导出的PDF里，每个商品就会单独占据一行，完全符合你的需求啦！

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