jsPDF-AutoTable генерирует таблицу PDF с пустыми ячейками

Question

Я хочу создать pdf-таблицу ниже таблицы HTML, и для этого я использую jsPdf-AutoTable. Я получаю PDF, как показано ниже. Таблица состоит из правильного количества строк без каких-либо данных. Как получить файл pdf из этой таблицы.? Я также использую Datatable.js на этой таблице.

HTML Таблица разметки и Javascript приведен ниже.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> 
 
<script src="https://github.com/MrRio/jsPDF/blob/master/dist/jspdf.debug.js"> </script> 
 
<script src="https://github.com/simonbengtsson/jsPDF-AutoTable/blob/master/dist/jspdf.plugin.autotable.src.js"> </script> 
 

 
// this function generates the pdf using the table 
 
function generate() { 
 
    var columns = ["productid", "productname", "unit", "unitprice"]; 
 
    var data = tableToJson($("#products-table").get(0), columns); 
 
    var doc = new jsPDF('p', 'pt'); 
 
    doc.autoTable(columns, data); 
 
    doc.save("table.pdf"); 
 
} 
 

 
// This function will return table data in an Array format 
 
function tableToJson(table, columns) { 
 
    var data = []; 
 
    // go through cells 
 
    for (var i = 1; i < table.rows.length; i++) { 
 
    var tableRow = table.rows[i]; 
 
    var rowData = {}; 
 
    for (var j = 0; j < tableRow.cells.length; j++) { 
 
     rowData[columns[j]] = tableRow.cells[j].innerHTML; 
 
    } 
 
    data.push(rowData); 
 
    } 
 
    return data; 
 
}

<table id="products-table" cellspacing="0" width="100%"> 
 
    <thead> 
 
     <tr> 
 
     <th>ProductId</th> 
 
     <th>ProductName</th> 
 
     <th>Unit</th> 
 
     <th>UnitPrice</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 

 
    <a href="#" onclick="generate()" id="generate-report-button" class="btn">Run Code</a>

Answer 1

Это происходит потому, что вы создаете объекты из данных таблицы. Вы должны создать массив из данных.

function tableToJson(table, columns) { 
    var data = []; 
    // go through cells 
    for (var i = 1; i < table.rows.length; i++) { 
    var tableRow = table.rows[i]; 

    // create an array rather than an object 
    var rowData = []; 
    for (var j = 0; j < tableRow.cells.length; j++) { 
     rowData.push(tableRow.cells[j].innerHTML) 
    } 
    data.push(rowData); 
    } 

    return data; 
} 

проверка работает скрипку https://jsfiddle.net/shakee93/dh8e7gjc/