1

Corpo do 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>

Aqui tenho o botão para gerar o pdf:

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

Gera o pdf, mas o pdf fica em branco, não recebe os dados do html.

1 Resposta 1

1

Tenta isso essa soluçao:

  1. Transformar o html em canvas usando o html2canvas (Para evitar erro tipo este)
  2. Transformar o canvas em imagem
  3. E por fim a imagem em PDF
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);
  })

}

Para mais informações sobre o metódo addImage consulte a documentação

8
  • obrigado pela ajuda. Estou a utilizar a solução que apresentou, mas depois como chamo esse exemplo que colocou no botão para gerar o pdf?
    – Bruno
    22/05/2019 às 13:01
  • @Bruno vou já editar o codigo para a cautelar essa questão. 22/05/2019 às 13:05
  • só mais uma coisa, nesta linha const html_source = document.getElementById('content'); posso usar o id do form, certo?
    – Bruno
    22/05/2019 às 13:09
  • Sim! Pode usar o id do formulário caso seja o elemento que deseja imprimir em PDF 22/05/2019 às 13:17
  • @Bruno Veja está resposta Montar PDF via website talvez pode te ajudar. 22/05/2019 às 13:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .