7

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

1 respuesta 1

3

jspdf no trabaja con css lo que podrias es trabajar con html2canvas: incluye los archivos en tu pagina html:

<script type="text/javascript" src="html2canvas.js"></script>
  <script type="text/javascript" src="jspdf.min.js"></script>
  <script type="text/javascript">
  function genPDF()
  {
   html2canvas(document.body,{
   onrendered:function(canvas){

   var img=canvas.toDataURL("image/png");
   var doc = new jsPDF();
   doc.addImage(img,'JPEG',20,20);
   doc.save('test.pdf');
   }

   });

  }
  </script>

html2Canvas podrias de esa forma para usar estilos css

3
  • 1
    excelente, muchas gracias, el único problemas es que la resolución de la captura es muy baja Commented el 17 abr. 2018 a las 19:43
  • Y para añadir un salto de pagina en caso de que sea un html extenso?
    – juank
    Commented el 25 ago. 2021 a las 18:41
  • Hola, espero y me puedas ayudar tengo un div con elementos adentro de el el cual uso html2canvas para convertirlo a imagen y todo perfecto, el detalle es que en ese div quiero una imagen de fondo y al colocársela ya no me genera la imagen con canvas como podria hacer para que si la transforme? Commented el 6 oct. 2021 a las 22:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.