jsPDF auto-table header 文本不起作用以及如何将 html 呈现为 header

Question

Header 例子

使用许多在线示例，我试图将 header 文本打印到 table 的顶部。我不能做的一件事是更新 jsPDF 和 auto-table versions.This 是由于代码最终发生的一些内部冲突。问题 1 是为什么 header 没有渲染到顶部。第二个问题是如何将 html 渲染到 header 的顶部，而不仅仅是文本。目前 doc.text 只接受字符串作为参数。

我想渲染类似：“Main Title small title”的内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.60/jspdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.15/jspdf.plugin.autotable.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.15/jspdf.plugin.autotable.src.js"></script>
    </head>

<body>
    <button onclick="generatePdf()">Generate pdf</button>


    <script>
        function generatePdf(){

        var columns = [{
                title: "ID",
                dataKey: "id"
            },
            {
                title: "Name",
                dataKey: "name"
            },
            {
                title: "Country",
                dataKey: "country"
            },
        ];
        var rows = [{
                "id": 1,
                "name": "Shaw",
                "country": "Tanzania"
            },
            {
                "id": 2,
                "name": "Nelson",
                "country": "Kazakhstan"
            },
            {
                "id": 3,
                "name": "Garcia",
                "country": "Madagascar"
            },
        ];

        var doc = new jsPDF('p', 'pt');
        var headerTxt ="This is test header"
        var header = function (data) {
            doc.setFontSize(18);
            doc.setTextColor(40);
            doc.setFontStyle('normal');
            //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
            doc.text(headerTxt, data.settings.margin.left, 50);
        };
        var options = {
            beforePageContent: header,
            margin: {
                top: 80
            },
            startY: doc.autoTableEndPosY() + 20
        };
        doc.autoTable(columns, rows, options)

        doc.save('table.pdf'); 
    }
        </script>
        </body> 
        </html>

Answer 1

您必须将 header 附加到 beforePageContent 并直接传递它，不要附加选项

 <!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.60/jspdf.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.15/jspdf.plugin.autotable.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.15/jspdf.plugin.autotable.src.js"></script>
    </head>

    <body>
        <button onclick="generatePdf()">Generate pdf</button>


        <script>
            function generatePdf() {

                var columns = [{
                        title: "ID",
                        dataKey: "id"
                    },
                    {
                        title: "Name",
                        dataKey: "name"
                    },
                    {
                        title: "Country",
                        dataKey: "country"
                    },
                ];
                var rows = [{
                        "id": 1,
                        "name": "Shaw",
                        "country": "Tanzania"
                    },
                    {
                        "id": 2,
                        "name": "Nelson",
                        "country": "Kazakhstan"
                    },
                    {
                        "id": 3,
                        "name": "Garcia",
                        "country": "Madagascar"
                    },
                ];


                var doc = new jsPDF('p', 'pt');

                var header = function (data) {
                    doc.setFontSize(18);
                    doc.setTextColor(40);
                    doc.setFontStyle('normal');
//doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
                    doc.text("Testing Report", data.settings.margin.left, 50);
                };

                doc.autoTable(columns, rows, {margin: {top: 80}, beforePageContent: header});

                doc.save("table.pdf");
            }
        </script>
    </body> 
</html>

Answer 2

BeforePageContent 已弃用.. 使用：

didDrawPage : header

作为替代品。

jsPDF auto-table header 文本不起作用以及如何将 html 呈现为 header

jsPDF auto-table header text not working and how to render html to header

javascript

jquery

jspdf

jspdf-autotable