web-dev-qa-db-ja.com

jspdf autotableの列ごとに異なる幅？

テーブルには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'},  });
jspdfjspdf-autotable
14
Abdu Rahiman

ColumnWidth配列を次のように変換する必要があります。

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

columnStylesの代わりにstylesを使用していることに注意してください。

23
Simon Bengtsson

以前のリリース（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によって適宜調整されます

6
Pikesh Prasoon

たとえば、[steps、Methods、process、Delivers、Results]はすべて私のテーブルヘッダーです。テーブル幅の平均を増やしたり減らしたりしたい場合は、

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

ここでは、各列の幅を指定できます。

3
Beckham_Vinoth

デフォルトでは、「列スタイル」は「オプション」にありません。それは、それを作成する必要があり、次のステップで「列幅」を定義します。

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