PDF generated goes blank with Jspdf

Question

Body of html:

<div id="content">  
  <div class="table-responsive" >   
    <table class="table">';

while($row = mysqli_fetch_array($result))  
{  
  $output .= '
  <div class="modal-body">  
  <div class="table-responsive"> 
  <form id="insert_form">
  <div class="form-group input-group">
  <span class="input-group-addon">
  <span class="fa fa-code"></span>
  </span>
  <input type="text" id="codigo1" name="codigo" value="'.$row["codigo"].'" class="form-control" readonly="true"/>
  </div>
  <div class="form-group input-group">
  <span class="input-group-addon">
  <span class="glyphicon glyphicon-user"></span>
  </span>
  <input type="text" id="nome1" name="nome" value="'.$row["nome"].'" class="form-control" readonly="true"/>
  </div>
  <div class="form-group input-group">
  <span class="input-group-addon">
  <span class="fa fa-birthday-cake"></span>
  </span>
  <input type="text" id="data1" name="data" value="'.$row["data"].'" class="form-control" readonly="true"/>
  </div>
  <div class="form-group input-group">
  <span class="input-group-addon">
  <span class="fa fa-calendar"></span>
  </span>
  <input type="text" id="admissao1" name="admissao" value="'.$row["admissao"].'" class="form-control" readonly="true"/>
  </div>
  <div class="form-group input-group">
  <span class="input-group-addon">
  <span class="glyphicon glyphicon-info-sign"></span>
  </span>
  <input type="text" id="dependencia1" name="dependencia" value="'.$row["Dependencia"].'" class="form-control" readonly="true"/>
  </div>
  <div class="form-group input-group">
  <span class="input-group-addon">
  <span class="teste">Ajudas Técnicas</span>
  </span>
  <div class="funkyradio">
  <div class="grid-container">
  <div class="funkyradio-success grid-item">
  <input type="checkbox" name="tecnicas" id="tecnicas2" Value="Sim" ' . ( ($row["tecnicas"]=='Sim') ? 'checked' : '' ) .' readonly="true">
  <label for="tecnicas">Sim</label>
  </div>
  <div class="funkyradio-primary grid-item">
  <input type="checkbox" name="tecnicas" id="tecnicas3" Value="Não" ' . ( ($row["tecnicas"]=='Não') ? 'checked' : '' ) .' readonly="true">
  <label for="tecnicas1">Não </label>
  </div>
  </div>
  <span class="input-group-addon">
  <span>Qual/Quais</span>
  </span>
  </div>
  </span>
  <input type="text" class="form-control" id="qual1" name="qual" value="'.$row["qual"].'" class="form-control" readonly="true">
  </div>
  <div class="modal-footer" >
  <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button> 
  <a type="button" name="edit" id="'.$row["Id"].'" data-toggle="modal" href="#add_data_Modal" class="btn btn-primary edit_data">Editar</a>                       
  </div>
  </form>                    
  </div>
  </div>                
  ';  
}
  $output.= '     
  </table> 
  </div>           
  </div> 
  '; 

Script:

<script>
  function demoFromHTML() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    source = $('#content')[0];
    specialElementHandlers = {
      '#bypassme': function (element, renderer) {
        return true
       }
    };
    margins = {
      top: 80,
      bottom: 60,
      left: 40,
      width: 522
    };
    pdf.fromHTML(
      source, 
      margins.left, 
      margins.top, {
        'width': margins.width, 
        'elementHandlers': specialElementHandlers
      },
      function (dispose) {
        pdf.save('Test.pdf');
      }, 
      margins
    );
  }
</script>

Here I have the button to generate the pdf:

<button class="btn btn-info" onclick="javascript:demoFromHTML();">
  <span class="glyphicon glyphicon-print"></span>
</button>

Generates the pdf, but the pdf is blank, does not receive the html data.

Answer 1

Try that little hiccup:

1. Transform the html into canvas using the html2canvas (To avoid type error this)
2. Transform the canvas in image
3. And finally the PDF image

function demoFromHTML() {

  const html_source = document.getElementById('employee_detail'); // O id do elemento que contém o Html que quer imprimir. 
  const filename = 'Test.pdf';


  html2canvas(html_source).then(function(canvas) {
    let imgData = canvas.toDataURL('image/png');

    let pdf = new jsPDF('p', 'mm', 'a4'); // Essas demissões [297, 210] correspondem a um A4 

    // addImage(imageData, format, x, y, width, height, alias, compression, rotation) 
    // x: Coordenada (em unidades declaradas no início do documento PDF) contra a borda esquerda da página 
    // y: Coordenada (em unidades declaradas no início do documento PDF) contra a borda superior da página 
    pdf.addImage(imgData, 'PNG', 10, 10);
    pdf.save(filename);
  })

}

For more information on the method addImage see the documentation