tengo el siguiente HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>hola</title>
<meta charset="utf-8">
<link link="" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css">
<link href="/public/css/app.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
</head>
<body>
<div id="print">
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1">
<p align="JUSTIFY"><font size="2" style="font-size: 9pt">parrafo</font></p>
<p align="CENTER"><font size="1" style="font-size: 8pt">lema</font></p>
<p align="CENTER"><b>CERTIFICAN:</b></p>
<p align="LEFT"><font size="2" style="font-size: 9pt">Que NOMBRE APELLIDO estuvo matriculado(a) en el XXXXX, Calendario X, en el Grado numero para el año escolar año} y obtuvo los siguientes resultados finales:</font></p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">AREAS/ASIGNATURAS</th>
<th scope="col">I.H</th>
<th scope="col">CALIFICACIÓN</th>
</tr>
</thead>
<tbody>
<tr>
<td><b>area_name</b></td>
<td><b>todas las horas</b></td>
<td>notas</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Y un botón que ejecuta un Script
que convierte el HTML
del <div id="print">
a PDF
<a href="javascript:pruebaDivAPdf()" class="button">Pasar a PDF</a>
Script:
<script>
function pruebaDivAPdf() {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#print')[0];
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left, // x coord
margins.top, { // y coord
'width': margins.width,
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Prueba.pdf');
}, margins
);
}
</script>
El script
se ejecuta correctamente, pero el PDF que se genera no respeta los estilos CSS
asignados al HTML
.
No sé si estoy haciendo algo mal, de antemano les agradezco cualquier ayuda