jsPDF-AutoTable 生成带有空单元格的 PDF table
jsPDF-AutoTable generates a PDF table with empty cells
我想从 HTML table 下面生成一个 pdf,为此我正在使用 jsPdf-AutoTable。我得到一个 PDF,如下图所示。 table 由正确的行数组成,其中没有任何数据。如何生成这个 table. 的 pdf 我们?
我还在 table.
上使用 Datatable.js
HTML Table 标记和下面给出的 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>
这是因为您正在从 table 数据创建对象。您应该从数据创建一个数组。
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;
}
检查工作情况fiddle
https://jsfiddle.net/shakee93/dh8e7gjc/
我想从 HTML table 下面生成一个 pdf,为此我正在使用 jsPdf-AutoTable。我得到一个 PDF,如下图所示。 table 由正确的行数组成,其中没有任何数据。如何生成这个 table. 的 pdf 我们? 我还在 table.
上使用 Datatable.jsHTML Table 标记和下面给出的 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>
这是因为您正在从 table 数据创建对象。您应该从数据创建一个数组。
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;
}
检查工作情况fiddle https://jsfiddle.net/shakee93/dh8e7gjc/