0

En estos momentos me encuentro con un problema al usar la libreria jspdf y busco sacar un reporte de una tabla de datos, aunque me saca el pdf no agarra para nada el elemento html que necesito en el reporte

Función JavaScript

$("#generarPDF").click(function (event) {
        event.preventDefault();

        let doc = new jsPDF();
        const tabla = document.getElementById("tabla");
        doc.setFontSize(20);
        doc.text("Reportes", 20, 20);
        doc.html(tabla, {
            x: 10,
            y: 10,
            callback: function (doc) {
                doc.save("reporte.pdf")
            },

        });
        doc.save("reporte.pdf");
    });

HTML que requiero en el pdf

<table class="table text-center" id="tabla">
                <thead class="table-dark">
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Cliente</th>
                        <th scope="col">SI</th>
                        <th scope="col">V</th>
                        <th scope="col">DV</th>
                        <th scope="col">SC</th>
                        <th scope="col">Observación</th>
                        <th scope="col">Fecha</th>
                        <?php
                            if($_SESSION['tipo_usuario'] == 2){
                                echo '<th scope="col">Usuario</th>';
                            }
                        ?>
                        <th scope="col">Municipio</th>
                    </tr>
                </thead>
                <tbody>
                <?php
                    $resultado = mysqli_query($conexion, $consulta);
                    while($fila = mysqli_fetch_assoc($resultado)){ ?>
                        <tr id="<?php echo $fila['idventas']; ?>">
                            <td><input type='checkbox' class="delete_checkbox" name='ids[]' value="<?php echo $fila['idventas']?>"></td>
                            <td><?php echo $fila['nombreCliente'];?></td>
                            <td><?php echo $fila['saldoInicial'];?></td>
                            <td><?php echo $fila['venta'];?></td>
                            <td><?php echo $fila['devueltoVacio'];?></td>
                            <td><?php echo $fila['saldoCliente'];?></td>
                            <td><?php echo $fila['observacion'];?></td>
                            <td><?php echo $fila['fechaVenta'];?></td>
                            <?php
                                if($_SESSION['tipo_usuario'] == 2){
                                    echo "<td>".$fila['username']."</td>";
                                }
                                ?>    
                            <td><?php echo $fila['nombreMunicipio']; ?></td>
                        </tr>
                    <?php } ?>
                </tbody>
            </table>

Siento que igual y es el metodo html() ya que me guarda el texto y el pdf pero no la tabla, Por cierto estoy usando JavaScript vanilla y este es el CDN con la versión

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

También me imprime este error en consola lo cual me deja pensando

introducir la descripción de la imagen aquí

2
  • Deberias agregar tu HTML
    – alanfcm
    el 16 may. 2022 a las 21:17
  • ya lo actualice gracias por la corrección el 16 may. 2022 a las 21:20

1 respuesta 1

0

¿Has probado con el plugin jspdf-autotable?

https://github.com/simonbengtsson/jsPDF-AutoTable

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>

<table class="table text-center" id="tabla">
  <thead class="table-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Cliente</th>
      <th scope="col">SI</th>
      <th scope="col">V</th>
      <th scope="col">DV</th>
      <th scope="col">SC</th>
      <th scope="col">Observación</th>
      <th scope="col">Fecha</th>
      <th scope="col">Municipio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Edward</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>Sin observaciones</td>
      <td>01/06/2022</td>
      <td>Municipio</td>
    </tr>
  </tbody>
</table><br>

<button id="buttonPDF">Generar PDF</button>

JavaScript:

$('#buttonPDF').click(function() {
  var doc = new jsPDF()
  doc.autoTable({ html: '#tabla' })
  doc.save('table.pdf')
});

https://jsfiddle.net/romeroedward18/xgc4muvs/19/

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.