tabla - jspdf table style

Exportar tabla HTML a pdf usando jspdf

Question

Necesito exportar la tabla HTML a un archivo pdf usando jspdf. Probé el siguiente código, pero muestra el resultado en blanco / vacío en el archivo pdf. Cualquier sugerencia o código de ejemplo para esto sería útil. `

<script type="text/javascript">
function demo1() {
$(function () {
var specialElementHandlers = {
''#editor'': function (element,renderer) {
return true;
}
};
$(''#cmd'').click(function () {
var doc = new jsPDF();
doc.fromHTML($(''#htmlTableId'').html(), 15, 15, {
''width'': 170,''elementHandlers'': specialElementHandlers
});
doc.save(''sample-file.pdf'');
});
});
}
</script>
`

Answer 1

Aquí está el ejemplo de trabajo:

en cabeza

<script type="text/javascript" src="jspdf.debug.js"></script>

guión:

<script type="text/javascript">
function demoFromHTML() {
var pdf = new jsPDF(''p'', ''pt'', ''letter'');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $(''#customers'')[0];
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
''#bypassme'': function(element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
// all coords and widths are in jsPDF instance''s declared units
// ''inches'' in this case
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, {// y coord
''width'': margins.width, // max width of content on PDF
''elementHandlers'': specialElementHandlers
},
function(dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save(''Test.pdf'');
}
, margins);
}
</script>

y mesa:

<div id="customers">
<table id="tab_customers" class="table table-striped" >
<colgroup>
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
</colgroup>
<thead>
<tr class=''warning''>
<th>Country</th>
<th>Population</th>
<th>Date</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chinna</td>
<td>1,363,480,000</td>
<td>March 24, 2014</td>
<td>19.1</td>
</tr>
<tr>
<td>India</td>
<td>1,241,900,000</td>
<td>March 24, 2014</td>
<td>17.4</td>
</tr>
<tr>
<td>United States</td>
<td>317,746,000</td>
<td>March 24, 2014</td>
<td>4.44</td>
</tr>
<tr>
<td>Indonesia</td>
<td>249,866,000</td>
<td>July 1, 2013</td>
<td>3.49</td>
</tr>
<tr>
<td>Brazil</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
</tbody>
</table>
</div>

y botón para ejecutar:

<button onclick="javascript:demoFromHTML()">PDF</button>

y ejemplo de trabajo en línea:

tabel a pdf jspdf

o prueba esto: Exportación de tablas HTML

Answer 2

Podemos separar la sección de la que necesitamos convertir en PDF.

Por ejemplo, si la tabla está en la clase " pdf-table-wrap "

Después de esto, necesitamos llamar a la función html2canvas combinada con jsPDF

siguiente es código de ejemplo

 var pdf = new jsPDF(''p'', ''pt'', [580, 630]);
html2canvas($(".pdf-table-wrap")[0], {
onrendered: function(canvas) {
document.body.appendChild(canvas);
var ctx = canvas.getContext(''2d'');
var imgData = canvas.toDataURL("image/png", 1.0);
var width = canvas.width;
var height = canvas.clientHeight;
pdf.addImage(imgData, ''PNG'', 20, 20, (width - 10), (height));
}
});
setTimeout(function() {
//jsPDF code to save file
pdf.save(''sample.pdf'');
}, 0);

El tutorial completo se proporciona aquí http://freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas/

Answer 3

También puede utilizar el jsPDF-AutoTable . Puede ver una demostración here que utiliza el siguiente código.

var doc = new jsPDF(''p'', ''pt'');
var elem = document.getElementById("basic-table");
var res = doc.autoTableHtmlToJson(elem);
doc.autoTable(res.columns, res.data);
doc.save("table.pdf");

Answer 4

Use get(0) lugar de html() . En otras palabras, reemplazar

doc.fromHTML($(''#htmlTableId'').html(), 15, 15, {
''width'': 170,''elementHandlers'': specialElementHandlers
});

con

doc.fromHTML($(''#htmlTableId'').get(0), 15, 15, {
''width'': 170,''elementHandlers'': specialElementHandlers
});