导出PDF中缺少表头

Question

我正在尝试使用jspdf (类似于HTML5 )来转换Export HTML table to pdf using jspdf表。但是，我的表中的元素是动态生成的。

function createTable(){
    var reportDiv = document.getElementById('customers');
    var table = document.createElement('table');
    table.id = 'tab_customers';
    table.className = 'table table-striped';
    var thead = document.createElement('thead');


    var tableHeader = document.createElement('th');
    tableHeader.innerHTML = "Name";
    thead.appendChild(tableHeader);

    var tableHeader = document.createElement('th');
    tableHeader.innerHTML = "Status";
    thead.appendChild(tableHeader);


    table.appendChild(thead);

    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);

    cell1.innerHTML = "json";
    cell2.innerHTML = "fail";

    reportDiv.appendChild(table);
   return reportDiv;
}

PDF被创建，但问题是它无法显示表头。但是，如果我从上面的dom手动创建表(复制粘贴)，则会呈现表头。如果能在这方面提供任何帮助，我们将不胜感激。谢谢

Answer 1

th元素必须包装在tr元素周围。然后将tr附加到thead，最后附加到表元素。

 function createTable(){
        var reportDiv = document.getElementById('customers1');
        var table = document.createElement('table');
        table.id = 'tab_customers1';
        table.className = 'table table-striped';
        var thead = document.createElement('thead');
        var tr = document.createElement('tr');

        var tableHeader = document.createElement('th');
        tableHeader.innerHTML = "Name";
        tr.appendChild(tableHeader);

        var tableHeader = document.createElement('th');
        tableHeader.innerHTML = "Status";
        tr.appendChild(tableHeader);

        thead.appendChild(tr);

        table.appendChild(thead);

        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);

        cell1.innerHTML = "json";
        cell2.innerHTML = "fail";

        reportDiv.appendChild(table);
       return reportDiv;
    }