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

元素必须包含 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;
    }

导出的PDF中缺少表头

1 个答案: