jspdf-autotable - 创建一个 jsPDF-Autotable，其中固定列宽决定表格宽度

Question

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

我希望除了第一列(标题列)之外的每一列都具有相同的宽度。

溢出的列将位于上表下方的新表中(见下文)。

对于最终表格(其列数通常与其上方的表格不同)，列的宽度应相同。

因此，在由下面的代码片段生成的 .PDF 中，两个表格应按如下方式对齐(注意单元格的确切数量会有所不同):

+-----+----+----+----+----+----+----+----+----+----+----+
|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

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