jspdf autotable中每列的宽度不同？答案

【问题标题】：Different width for each columns in jspdf autotable?jspdf autotable中每列的宽度不同？
【发布时间】：2016-08-05 10:50:48
【问题描述】：

我的表有 13 列。如何为每列获得不同的宽度？我可以像这样给每个列宽吗？

样式：{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'},  });

【问题讨论】：

为什么需要指定每列的宽度？自动宽度计算不适用于您的用例吗？

标签： jspdf jspdf-autotable

【解决方案1】：

您必须将 columnWidth 数组转换为如下所示：

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

注意使用columnStyles 而不是styles。

【讨论】：

嗨，西蒙，这就是我要找的。谢谢！
刚刚发现你的代码有错误，应该是columnStyles: { 0: {columnWidth: 60}, 1: {columnWidth: 40}, 2: {columnWidth: 100} // etc }
是的@Becky！它得到了解决。您的代码也可以正常工作。
嗨，先生，它对我有用。我想要另一个选项。如何设置列文本右对齐？？？
在新版本中，columnWidth 已被弃用，这是对 cellWidth 的必要更改。

【解决方案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、名称、角色和位置修复到指定的限制。其余的 headers 会被 autotable.js 做相应的调整

【讨论】：

在新版本中，columnWidth 已被弃用，此必要更改为 cellWidth

【解决方案3】：

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

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

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

【讨论】：

在新版本中，columnWidth 已被弃用，此必要更改为 cellWidth

【解决方案4】：

默认情况下，'选项'中没有'columnsStyles'，有必要创建它，下一步你定义'columnWidth'。

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

【讨论】：

在新版本中，columnWidth 已被弃用，此必要更改为 cellWidth