jquery - tabla - jspdf table style
Cómo exportar los datos de las Tablas HTML a PDF utilizando Jspdf (8)
¿Cómo exporto las tablas en la página HTML a PDF? He realizado algunos datos de muestra, pero no puedo cargar la lista de tablas HTML en PDF. Por favor, alguien me puede ayudar a cargar las Tablas en PDF
<!DOCTYPE html>
<html lang="en">
<head>
<title>html2canvas example</title>
<script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.from_html.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var specialElementHandlers = {
''#editor'': function(element, renderer) { return true; }
};
$(''#cmd'').click(function() {
var doc = new jsPDF();
doc.fromHTML($(''#target'').html(), 15, 15, {
''width'': 170,''elementHandlers'': specialElementHandlers
});
doc.save(''sample-file.pdf'');
});
});
</script>
</head>
<body id="target">
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<a class="upload">Upload to Imgur</a>
<h2>this is <b>bold</b> <span style="color:red">red</span></h2>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</div>
<button id="cmd">generate PDF</button>
</body>
</html>
" Cómo utilizar correctamente la biblioteca jsPDF " puede darle un poco más de lo que necesita. La tabla no se procesará correctamente ( no css, por esta respuesta ), pero podría hacer un análisis de la tabla html con jQuery y diseñarla manualmente.
Otra opción sería utilizar capturas de pantalla de HTML con HTML2Canvas o Casper.js .
EDITAR
Aquí hay un ejemplo básico usando el plugin jspdf. Utiliza jquery y la función tableToJson() de la tabla HTML a JSON .
Asegúrese de incluir la biblioteca Deflate (dos archivos js) y jspdf.plugin.cell.js .
var table = tableToJson($(''#table-id'').get(0))
var doc = new jsPDF(''p'', ''pt'', ''a4'', true);
doc.cellInitialize();
$.each(table, function (i, row){
$.each(row, function (j, cell){
doc.cell(10, 200, 100, 20, cell, i);
})
})
doc.save()
Aquí hay un ejemplo que creo que te ayudará.
<!DOCTYPE html>
<html>
<head>
<script src="js/min.js"></script>
<script src="js/pdf.js"></script>
<script>
$(function(){
var doc = new jsPDF();
var specialElementHandlers = {
''#editor'': function (element, renderer) {
return true;
}
};
$(''#cmd'').click(function () {
var table = tableToJson($(''#StudentInfoListTable'').get(0))
var doc = new jsPDF(''p'',''pt'', ''a4'', true);
doc.cellInitialize();
$.each(table, function (i, row){
console.debug(row);
$.each(row, function (j, cell){
doc.cell(10, 50,120, 50, cell, i); // 2nd parameter=top margin,1st=left margin 3rd=row cell width 4th=Row height
})
})
doc.save(''sample-file.pdf'');
});
function tableToJson(table) {
var data = [];
// first row needs to be headers
var headers = [];
for (var i=0; i<table.rows[0].cells.length; i++) {
headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'''');
}
// go through cells
for (var i=0; i<table.rows.length; i++) {
var tableRow = table.rows[i];
var rowData = {};
for (var j=0; j<tableRow.cells.length; j++) {
rowData[ headers[j] ] = tableRow.cells[j].innerHTML;
}
data.push(rowData);
}
return data;
}
});
</script>
</head>
<body>
<div id="table">
<table id="StudentInfoListTable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Track</th>
<th>S.S.C Roll</th>
<th>S.S.C Division</th>
<th>H.S.C Roll</th>
<th>H.S.C Division</th>
<th>District</th>
</tr>
</thead>
<tbody>
<tr>
<td>alimon </td>
<td>Email</td>
<td>1</td>
<td>2222</td>
<td>as</td>
<td>3333</td>
<td>dd</td>
<td>33</td>
</tr>
</tbody>
</table>
<button id="cmd">Submit</button>
</body>
</html>
Aquí la salida
Hay un tablePlugin para jspdf que espera un conjunto de objetos y muestra esos datos como una tabla. Puede aplicar estilo al texto y los encabezados con pequeños cambios en el código. Es de código abierto y también tiene ejemplos para comenzar.
Lamentablemente no es posible hacerlo.
jsPDF no admite la exportación de imágenes y tablas en el método fromHTML . en jsPDF v0.9.0 rc2
Tratar de poner
doc.fromHTML($(''#target'').get(0), 15, 15, {
''width'': 170,''elementHandlers'': specialElementHandlers
});
en lugar de
doc.fromHTML($(''#target'').html(), 15, 15, {
''width'': 170,''elementHandlers'': specialElementHandlers
});
Una buena opción es AutoTable (un complemento de tabla para jsPDF) , incluye temas, rowpan, colspan, extrae datos de html, funciona con json, también puede personalizar sus encabezados y hacerlos horizontales. Here hay una demo.
Simplemente siga estos pasos y puedo asegurar que se generará un archivo pdf
<html>
<head>
<title>Exporting table data to pdf Example</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/from_html.js"></script>
<script type="text/javascript" src="js/split_text_to_size.js"></script>
<script type="text/javascript" src="js/standard_fonts_metrics.js"></script>
<script type="text/javascript" src="js/cell.js"></script>
<script type="text/javascript" src="js/FileSaver.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#exportpdf").click(function() {
var pdf = new jsPDF(''p'', ''pt'', ''ledger'');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $(''#yourTableIdName'')[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 : 60,
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(''fileNameOfGeneretedPdf.pdf'');
}, margins);
});
});
</script>
</head>
<body>
<div id="yourTableIdName">
<table style="width: 1020px;font-size: 12px;" border="1">
<thead>
<tr align="left">
<th>Country</th>
<th>State</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr align="left">
<td>India</td>
<td>Telangana</td>
<td>Nirmal</td>
</tr>
<tr align="left">
<td>India</td>
<td>Telangana</td>
<td>Nirmal</td>
</tr><tr align="left">
<td>India</td>
<td>Telangana</td>
<td>Nirmal</td>
</tr><tr align="left">
<td>India</td>
<td>Telangana</td>
<td>Nirmal</td>
</tr><tr align="left">
<td>India</td>
<td>Telangana</td>
<td>Nirmal</td>
</tr><tr align="left">
<td>India</td>
<td>Telangana</td>
<td>Nirmal</td>
</tr><tr align="left">
<td>India</td>
<td>Telangana</td>
<td>Nirmal</td>
</tr>
</tbody>
</table></div>
<input type="button" id="exportpdf" value="Download PDF">
</body>
</html>
Salida:
Salida de archivo HTML:
Salida de archivo pdf:
Usé el complemento Datatable JS para mi propósito de exportar datos de una tabla html a varios formatos. Con mi experiencia, fue muy rápido, fácil de usar y configurar con una codificación mínima.
A continuación se muestra un ejemplo de llamada a jquery que usa el complemento de datos, #example es su ID de tabla
$(document).ready(function() {
$(''#example'').DataTable( {
dom: ''Bfrtip'',
buttons: [
''copyHtml5'',
''excelHtml5'',
''csvHtml5'',
''pdfHtml5''
]
} );
} );
Encuentre el ejemplo completo en el siguiente enlace de referencia de datos:
https://datatables.net/extensions/buttons/examples/html5/simple.html
Así es como se ve después de la configuración (desde el sitio de referencia):
Debe tener las siguientes referencias de la biblioteca en su html (algunas se pueden encontrar en el enlace de referencia anterior)
jquery-1.12.3.js
jquery.dataTables.min.js
dataTables.buttons.min.js
jszip.min.js
pdfmake.min.js
vfs_fonts.js
buttons.html5.min.js