putTotalPages 在 jspdf-autotable header 中不起作用

Question

我正在尝试将 'Page number x of y' 添加到使用 jspdf 和 jspdf-autotable 生成的 PDF 中。我在 jspdf-autotable 示例站点上使用了 examples.js 文件中的代码，还使用了该网站中包含 putTotalPages 函数的 jspdf.debug.js 文件。

我在每一页上得到的结果是第一页上的 'Page 1 of {total_pages_count_string}' 和第二页上的 'Page 2 of {total_pages_count_string}' 即 total_pages_count_string 似乎没有正确更新。

我的整个代码如下：

$('#print').click(function() {
            $('#html-table table').remove();
            var table = $("#amu-whiteboard").tabulator("getHtml");
            $('#html-table').append(table);
            $('#html-table>table').attr("id", "table");
            $('#table th:not(:nth-child(1), :nth-child(2)), #table td:not(:nth-child(1), :nth-child(2))').remove();
            var columns = ["Bed", "Name", "Diagnoses", "Jobs"];
            var doc = new jsPDF('l', 'pt');
            doc.setFont('Helvetica', 'normal');
            doc.setTextColor(40);
            var dateTime = moment().format('HH:mm on MMMM Do, YYYY');
            var printedOn = "Printed at " + dateTime;
            var totalPagesExp = "{total_pages_count_string}";
            var pageContent = function(data) {
                doc.setFontSize(14);
                doc.text(21, 30, "AMU Handover Sheet");
                doc.setFontSize(10);
                doc.text(printedOn, doc.internal.pageSize.width / 2, 30, 'center');
                var str = "Page " + data.pageCount;

                if (typeof doc.putTotalPages === 'function') {
                    str = str + " of " + totalPagesExp;
                }
                doc.text(str, doc.internal.pageSize.width - 20, 30, 'right');
            };
            if (typeof doc.putTotalPages === 'function') {
                doc.putTotalPages(totalPagesExp);
            }
            var elem = document.getElementById("table");
            var res = doc.autoTableHtmlToJson(elem);
            doc.autoTable(columns, res.data, {
                addPageContent: pageContent,
                theme: 'grid',
                tableLineWidth: 0,
                bodyStyles: {
                    halign: 'center',
                    valign: 'middle',
                    fillColor: 250,
                    lineWidth: 0.5,
                    lineColor: 180,
                    cellPadding: 6,
                    fontSize: 11
                },
                margin: {
                    horizontal: 20,
                    bottom: 40,
                    top: 40
                },
                drawRow: function(row, data) {
                    doc.setFontSize(12);
                    doc.setFontStyle('bold');
                    if (row.index === 0) {
                        doc.setTextColor(30);
                        doc.rect(data.settings.margin.left, row.y, data.table.width, 30, 'S');
                        doc.autoTableText("A BAY", data.settings.margin.left + 5, row.y + 16, {
                            halign: 'left',
                            valign: 'middle'
                        });
                        data.cursor.y += 30;
                    } else if (row.index === 6) {
                        doc.setTextColor(30);
                        doc.rect(data.settings.margin.left, row.y, data.table.width, 30, 'S');
                        doc.autoTableText("B BAY", data.settings.margin.left + 5, row.y + 16, {
                            halign: 'left',
                            valign: 'middle'
                        });
                        data.cursor.y += 30;
                    } else if (row.index === 17) {
                        doc.setTextColor(30);
                        doc.rect(data.settings.margin.left, row.y, data.table.width, 30, 'S');
                        doc.autoTableText("C BAY", data.settings.margin.left + 5, row.y + 16, {
                            halign: 'left',
                            valign: 'middle'
                        });
                        data.cursor.y += 30;
                    } else if (row.index === 28) {
                        doc.setTextColor(30);
                        doc.rect(data.settings.margin.left, row.y, data.table.width, 30, 'S');
                        doc.autoTableText("SIDE ROOMS", data.settings.margin.left + 5, row.y + 16, {
                            halign: 'left',
                            valign: 'middle'
                        });
                        data.cursor.y += 30;
                    } else if (row.index === 30) {
                        doc.setTextColor(30);
                        doc.rect(data.settings.margin.left, row.y, data.table.width, 30, 'S');
                        doc.autoTableText("FAIRFAX", data.settings.margin.left + 5, row.y + 16, {
                            halign: 'left',
                            valign: 'middle'
                        });
                        data.cursor.y += 30;
                    }
                },
                headerStyles: {
                    fillColor: 120,
                    halign: 'center',
                    valign: 'middle',
                    fontSize: 12,
                },
                alternateRowStyles: {
                    fillColor: 255
                },
                columnStyles: {
                    0: {
                        columnWidth: 40
                    },
                    1: {
                        columnWidth: 180,
                        halign: 'left',
                    },
                    2: {
                        columnWidth: 240
                    },
                }
            });
            doc.save("table.pdf");
        })

谁能告诉我哪里出了问题？

Answer 1

我认为 putTotalPages() 必须在 autotable 之后调用。

putTotalPages 在 jspdf-autotable header 中不起作用

putTotalPages not working in jspdf-autotable header

jspdf

jspdf-autotable