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


I have the following HTML

    <!DOCTYPE html>
<html lang="es">
    <meta charset="utf-8">
    <link link="" rel="stylesheet" href="" type="text/css">
    <link rel="stylesheet" href="" type="text/css">
    <link href="/public/css/app.css" rel="stylesheet">
    <script src="" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
    <script src=""></script>
    <script src=""></script>
    <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 class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                    <th scope="col">AREAS/ASIGNATURAS</th>
                    <th scope="col">I.H</th>
                    <th scope="col">CALIFICACIÓN</th>
                    <td><b>todas las horas</b></td>

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>


    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

            margins.left, // x coord
  , { // y coord
                'width': margins.width, 
                'elementHandlers': specialElementHandlers

            function (dispose) {
            }, margins

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

1 answer


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()

   var img=canvas.toDataURL("image/png");
   var doc = new jsPDF();



html2Canvas you could like that to use CSS styles

answered by 17.04.2018 / 19:58