创建具有固定列宽的 jsPDF-Autotable 确定 table 宽度

Question

我需要呈现一个table从通常的数据呈现方式转置（即在table中要求，每条记录由一列表示，每个字段由一行表示).

我希望除了第一列（header 列）之外的每一列都具有相同的宽度。

溢出的列将位于上方 table 下方的新 table 中（见下文）。

对于最后的 table（通常与位于其上方的 table 具有不同的列数），列的宽度应相同。

因此，在下面代码片段生成的 .PDF 中，2 table 应该这样对齐（注意单元格的确切数量会有所不同）：

+-----+----+----+----+----+----+----+----+----+----+----+
|Day  | 1  | 2  | 3  | 4  | 5  | 6  | 7  | 8  | 9  | 10 |
+-----+----+----+----+----+----+----+----+----+----+----+
+-----+----+----+----+----+
|Day  | 11 | 12 | 13 | 14 |
+-----+----+----+----+----+

// generating the data for the table
const cols = 14;
const headers = (new Array(cols + 1)).fill(0).map((x,i) => (i).toString());
headers[0] = 'DAY #:';
const today = new Date();
const data = [headers.map((x, i) => {
    const date = new Date(today);
    date.setDate(date.getDate() + i);
    return date.toLocaleDateString(navigator.languages);
  }),
  headers.map((x, i) => (1 - i / cols).toPrecision(3)),
];
data[0][0] = "Date:"
data[1][0] = "Dose:"

// splitting the table data at 10 columns + rowHeader wide
const maxCols = 10;
const tables = [];
const tableCount = Math.ceil(cols/maxCols)
for (let i = 0; i < tableCount; ++i) {
  const slicePos = 1 + i * maxCols;
  const mapColsInRange = (d) => [d[0]].concat(d.slice(slicePos, slicePos + maxCols));
  tables.push({
    headers: mapColsInRange(headers),
    data: data.map(mapColsInRange),
  });
}
// creating the tables
const doc = new jsPDF('l', 'mm', 'a4');
for (const t of tables) {
  doc.autoTable({
    theme: 'grid',
    head: [ t.headers ],
    body: t.data,
    pageBreak: 'avoid',
    styles: { halign: 'center', cellWidth: 21 },
    columnStyles: { 0: { halign: 'left', fontStyle: 'bold', cellWidth: 34 }},
  });
}
doc.save('test.pdf');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.1.4/jspdf.plugin.autotable.min.js"></script>

如何使用 jsPDF-autoTable 选项对齐列？

Answer 1

您可以使用 cellWidth 选项将列设置为固定宽度。

Answer 2

添加自动选项 tableWidth: 'wrap' 是解决方案

Answer 3

const printableColumns = ['Account ID', 'First name', 'Last name', 'Created'];

如果要更改 'Last name' 的宽度，请将列索引号而不是 dataKey 放入 'columnStyles' 并设置单元格宽度

doc.autoTable({
        head: [printableColumns],
        body: pdfData,            ,
        columnStyles: {
            2: {cellWidth: 30},                           
        }            
    });

创建具有固定列宽的 jsPDF-Autotable 确定 table 宽度

Creating a jsPDF-Autotable with fixed column widths determining table width

jspdf-autotable