How to convert HTML to PDF with jsPDF, without losing CSS styles

Navigation
3

I have the following 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>

And a button that executes a Script that converts HTML of <div id="print"> to 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>

The script runs correctly, but the PDF that is generated does not respect the CSS styles assigned to HTML .

I do not know if I'm doing something wrong, I thank you in advance for any help

    
asked by Michael Valdes Gonzalez 17.04.2018 в 17:26
source

1 answer

2

jspdf does not work with css, so you could work with html2canvas: includes the files in your html page: 

<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 you could like that to use CSS styles

    
answered by 17.04.2018 / 19:58
source
Create variables in Razor and then manipulate them in Jquery? Compare elements of an array to find the greatest