如何在 jsPDF-AutoTable 中使用主题？答案

【问题标题】：How do I use themes with jsPDF-AutoTable?如何在 jsPDF-AutoTable 中使用主题？
【发布时间】：2020-04-04 00:43:39
【问题描述】：

我不明白我如何使用 jsPDF-AutoTable 的主题。 . .

这是我生成 PDF 的代码：

function tbl1ToPDF(){
            var table = tableToJson($('#tbl1').get(0));
            var doc = new jsPDF('l','pt','letter',true);
            $.each(table, function(i, row){
                $.each(row, function(j,cell){
                    if(i == 0)
                    {
                        doc.cell(10,10,150,50,cell,i, 'center');
                    }
                    else
                    {
                    doc.cell(10,10,150,120,cell,i,'center');
                    }
                });
            });
            doc.save('Sofort.pdf');
        }

这是我的 tableToJson 函数：

function tableToJson(table) {
        var data = [];
        var headers = [];
        for (var i = 0; i < table.rows[0].cells.length; i++) {
            headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
        }
        data.push(headers);
        // go through cells
        for (var i = 1; i < table.rows.length; i++) {
            var tableRow = table.rows[i];
            var rowData = {};
            for (var j = 0; j < tableRow.cells.length; j++) {
                rowData[headers[j]] = tableRow.cells[j].innerHTML;
            }
            data.push(rowData);
        }
        return data;
    }

我的表是动态的。我在按下 Button 后生成它，但 Table 的结构如下所示：

<h3>Header</h3>
<table id="tbl1">
  <thead>
    <tr>
      <th>Nr</th>
      <th>Name</th>
      <th>Unit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>2</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>
<input type="button" onclick="tbl1ToPDF" value="download">

您能帮我在我的 PDF 中应用一个主题吗？我以前从未这样做过，我真的需要帮助！

谢谢！

【问题讨论】：

你好像不是只使用jspdf，而不是jspdf-autotable？如果你想使用它的主题，请查看 jspdf autotable 自述文件。
是的！这只是一个例子。我阅读了自述文件，但我不明白该怎么做。但经过多次尝试，我终于做到了，而且比我想象的要容易......

标签： javascript jquery jspdf jspdf-autotable

【解决方案1】：

要使用 jsPDF-Autotable 插件，您需要在代码中调用它，如下所示：

var doc = new jsPDF();
doc.autoTable();

调用 autoTable 后，您可以通过这种方式对其应用一些选项，例如“主题”：

doc.autoTable({theme: 'grid'});

例如，我有一个 id = "table-report-p2p" 的 HTML 表格（3 列）我使用 autoTableHtmlToJson() 从中获取数据，然后应用了一些选项。

这是适合我的代码：

var elem = document.getElementById("table-report-p2p");
var res = doc.autoTableHtmlToJson(elem);
doc.autoTable(res.columns, res.data, {
    theme: 'grid',
    startY: 150,
    margin: {horizontal: 10},
    pageBreak: 'auto',
    rowPageBreak: 'avoid',
    columnStyles: {0: {cellWidth: 35, minCellHeight: 53},1: {cellWidth: 70},2: {cellWidth: 84}}
});

【讨论】：

你也想添加一些关于代码的描述