jspdf autotable中每个列的宽度可以不同吗？

Question

我的表格有13列，我怎么可以为每一列设置不同的宽度？我可以像这样为每一列指定宽度吗？

styles: {overflow: 'linebreak' ,columnWidth: [100,80,80,70,80,80,70,70,70,70,60,80,100]},

我的表格语法:

> var res = doc.autoTableHtmlToJson(document.getElementById(tableID)); 
> doc.autoTable(res.columns, res.data, {  styles: {overflow: 'linebreak'
> ,columnWidth: [100,80,80,70,80,80,70,70,70,70,60,80,100]},  startY:
> 60,  bodyStyles: {valign: 'top'},  });

- Abdu Rahiman

---

为什么需要指定每列的宽度？自动宽度计算对你的用例不起作用吗？ - Simon Bengtsson

Answer 1

你需要将columnWidth数组转换为以下形式：

doc.autoTable({
  html: '#table',
  columnStyles: {
    0: {cellWidth: 100},
    1: {cellWidth: 80},
    2: {cellWidth: 80},
    // etc
  }
});

请注意使用columnStyles而不是styles。

- Simon Bengtsson

---

嗨Simon，这就是我在寻找的东西。谢谢！ - Abdu Rahiman

刚刚注意到你的代码出现了错误，应该是 `columnStyles: { 0: {columnWidth: 60}, 1: {columnWidth: 40}, 2: {columnWidth: 100} // 等等 }` - Abdu Rahiman

是的，@Becky！问题已经解决了。你的代码也很好用。 - Abdu Rahiman

先生您好，这对我很有用。我想要另一个选项。如何将列文本设置为右对齐？ - Raja Priyan

在新版本中，columnWidth已被弃用，必须改为使用cellWidth。 - Darlan Dieterich

我有一个通用的jspdf导出逻辑，因为有很多页面需要导出功能，那么我需要为每个页面添加列样式吗？我不能动态设置宽度吗？ - Krunal Shah

Answer 2

在之前的版本（1.3.4）中，可以按照以下方式完成：

var columns = [
          {title: "Signum", dataKey: "signum"},
          {title: "Name", dataKey: "name"},
          {title: "Role", dataKey: "role"},
          {title: "Location", dataKey: "location"} 
          ]

但是最新的版本，即2.3.2需要以下格式。

doc.autoTable(colums,data,{
    addPageContent:pageContent,
    margin: {horizontal:5,top: 20},
    startY: 0.47*doc.internal.pageSize.height,
    styles: {overflow: 'linebreak'},
    columnStyles: {
     id: {columnWidth: 25}, 
     name:{columnWidth:40}, 
     role: {columnWidth: 15}, 
     location: {columnWidth: 30}
    }
  });

这将仅限制id、name、role和location的范围。其他所有标题都将由autotable.js自动调整。

- Pikesh Prasoon

---

在新版本中，columnWidth已被弃用，这是必要的更改为cellWidth。 - Darlan Dieterich

Answer 3

假设 [步骤，方法，过程，交付，结果] 都是我的表头。如果我想增加或减少表格宽度，意思是：

columnStyles: {
    steps: {columnWidth:215},
    Methods: {columnWidth: 60},
    process: {columnWidth: 100},
    Delivers: {columnWidth: 90},
    Result: {columnWidth: 90}
}

在这里，您可以指定每列的宽度。

- Beckham_Vinoth

---

在新版本中，columnWidth已被弃用，这是必要的更改为cellWidth。 - Darlan Dieterich

Answer 4

默认情况下，“Options”中没有“columnsStyles”，因此需要创建它，然后定义“columnWidth”。"Original Answer"翻译成"最初的回答"。

Options['columnStyles'] = {
  0: {columnWidth: 50},
  1: {columnWidth: 'auto'},
  2: {columnWidth: 'wrap'},
  3: {columnWidth: 150}
}
JSPDF.autoTable(columns, values, Options)

- Darlan Dieterich

---

在新版本中，columnWidth已被弃用，这是必要的更改为cellWidth。 - Darlan Dieterich