代码之家  ›  专栏  ›  技术社区  ›  jsPlayer

JSPDF自动表格标题文本不工作以及如何将HTML呈现到标题

  •  0
  • jsPlayer  · 技术社区  · 6 年前

    标题示例

    通过网上的许多例子,我试图将标题文本打印到表的顶部。我不能做的一件事是更新jsfd和auto-table版本,这是因为代码最终会在内部发生冲突。问题1是为什么标题没有呈现到顶部。第二个问题是如何将HTML呈现到页眉的顶部,而不仅仅是文本。当前doc.text只接受字符串作为参数。

    我想向头部呈现如下内容:“ main title small title”

    文档类型HTML>
    <html lang=“en”>
    
    <头部>
    <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>文档</title>
    
    <script src=“https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
    <script src=“https://cdnjs.cloudflare.com/ajax/libs/jsdf/1.2.60/jsdf.min.js”></script>
    <script src=“https://cdnjs.cloudflare.com/ajax/libs/jsfd autotable/2.0.15/jsfd.plugin.autotable.js”></script>
    <script src=“https://cdnjs.cloudflare.com/ajax/libs/jsfd autotable/2.0.15/jsfd.plugin.autotable.src.js”></script>
    </head>
    
    <正文>
    <button onclick=“GeneratePdf()”>生成PDF</button>
    
    
    <脚本>
    函数GeneratePdf()。{
    
    var列=[{
    标题:“ID”,
    数据键:“id”
    }
    {
    标题:“姓名”,
    数据键:“名称”
    }
    {
    标题:“国家”,
    数据键:“国家”
    }
    ;
    var行=[{
    “ID”:1,
    “name”:“肖”,
    “国家”:“坦桑尼亚”
    }
    {
    “ID”:2,
    “name”:“纳尔逊”,
    “country”:“哈萨克斯坦”
    }
    {
    
    

    <!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>
    2 回复  |  直到 5 年前
        1
  •  1
  •   Mohammad Raheem    6 年前

     <!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>
        2
  •  0
  •   George    5 年前

    didDrawPage : header