jspdf中每列的不同宽度可自动调整吗?

时间:2016-08-05 10:50:49

标签: jspdf jspdf-autotable

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

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

我的表格语法:

page.getViewById("background").animate({
    scale: { x: 1.4, y: 1.4 },
    duration: 4000
});

4 个答案:

答案 0 :(得分:20)

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

doc.autoTable({
  html: document.getElementById(tableID)
  columnStyles: {
    0: {columnWidth: 100},
    1: {columnWidth: 80},
    2: {columnWidth: 80},
    // etc
  }
});

请注意使用columnStyles代替styles

答案 1 :(得分:5)

在之前的版本(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,名称,角色和位置。其他标题将由autotable.js相应调整

答案 2 :(得分:3)

让我们说,[步骤,方法,流程,交付,结果]都是我的表格标题。如果我想增加或减少表格宽度,

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

您可以在此指定每个列宽。

答案 3 :(得分:0)

默认情况下,“选项”中没有“ columnsStyles”,因此有必要创建它,然后下一步定义“ columnWidth”。

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