jsPDF-autotable表格无法并排显示问题求助

原方案失效的核心原因是未明确限制表格宽度，导致表格默认占满页面宽度，无法实现横向并排。以下是调整后的可行方案：

实现步骤 #

• 计算横向页面的总可用宽度，将其分配给两个表格（示例中平分宽度）
• 为两个表格设置相同的纵向起始位置，确保上下对齐
• 通过width属性限制单个表格宽度，配合margin控制左右位置

修改后的代码 #

window.jsPDF = window.jspdf.jsPDF;

function generatePDF() {
  const doc = new jsPDF('l');
  const pageWidth = doc.internal.pageSize.getWidth();
  const tableWidth = (pageWidth - 40) / 2; // 减去左右边距后平分宽度
  const startY = 20; // 表格纵向起始位置

  // 渲染左侧表格
  doc.autoTable({
    html: '#table1',
    margin: { left: 20, top: startY },
    width: tableWidth,
    theme: 'striped'
  });

  // 渲染右侧表格
  doc.autoTable({
    html: '#table2',
    margin: { left: 20 + tableWidth + 10, top: startY }, // 左侧表格宽度+间距
    width: tableWidth,
    theme: 'striped'
  });

  doc.save('tables.pdf');
}

关键说明 #

1. 宽度计算：通过pageWidth获取横向页面总宽度，减去全局边距后平分给两个表格，避免宽度溢出
2. 纵向对齐：统一设置startY确保两个表格从同一位置开始渲染
3. 位置控制：右侧表格的margin.left = 左侧边距 + 左侧表格宽度 + 表格间距，保证横向并排且有间隔

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