javascript - Stretch table to full width jsPDF Autotable - Stack Overflow

admin管理员组

文章数量:1435859

Is there some way to stretch tables in jsdpdf-autotable package? My use case - I am making a generic pdf table downloader which generates a pdf downloader based on table structure. Currently, I am facing an issue with different table sizes.

If one table has 6 columns, the table is displayed corner to corner, but if a table has few columns, it only takes half or even lesser page size which leads to inconsistent pdf layouts.

So for that case, I am thinking of stretching all tables to a width of 100%.

I tried using margin: {left:0,right:0} and tableWidth:'auto' but to no avail :(

Any attribute I am missing?

PS: This is the autoTable block

doc.autoTable(headings, data, {
  theme: "grid",
  tableWidth: 200,
  margin: {right:0,left:0},
  tableWidth: 'auto',
  styles: {
    fontSize: fontSize,
    columnWidth: "wrap"
  },
  headerStyles: { fillColor: 120, textColor: 255, halign: "center" },
  columnStyles: {
    id: { fillColor: 255 }
  },

Is there some way to stretch tables in jsdpdf-autotable package? My use case - I am making a generic pdf table downloader which generates a pdf downloader based on table structure. Currently, I am facing an issue with different table sizes.

If one table has 6 columns, the table is displayed corner to corner, but if a table has few columns, it only takes half or even lesser page size which leads to inconsistent pdf layouts.

So for that case, I am thinking of stretching all tables to a width of 100%.

I tried using margin: {left:0,right:0} and tableWidth:'auto' but to no avail :(

Any attribute I am missing?

PS: This is the autoTable block

doc.autoTable(headings, data, {
  theme: "grid",
  tableWidth: 200,
  margin: {right:0,left:0},
  tableWidth: 'auto',
  styles: {
    fontSize: fontSize,
    columnWidth: "wrap"
  },
  headerStyles: { fillColor: 120, textColor: 255, halign: "center" },
  columnStyles: {
    id: { fillColor: 255 }
  },

• javascript
• jspdf
• jspdf-autotable

Share Improve this question Follow edited Jul 27, 2018 at 10:59 Aseem Upadhyay asked Jul 27, 2018 at 9:48 Aseem UpadhyayAseem Upadhyay 4,55744 gold badges1717 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

The tableWidth: 'auto' should work and since that is the default you can also simply omit it. Otherwise it is a bug which you can report in the github repo. Be sure to include a plete example of the problem.

You just need to set the tableWidth to the size of your page and set the left margin to 0

see this

autoTable(doc, {
  head: headers,
  body: data,
  startY: 80,
  showHead: "never",
  showFoot: "never",
  // this two properties
  tableWidth: doc.internal.pageSize.getWidth(),
  margin: { left: 0 },
});

本文标签： javascriptStretch table to full width jsPDF AutotableStack Overflow