0

Estoy creando una tabla con jsPDF y HTML, todo sale bien menos el mostrar las imagenes en el pdf.

 <table class="table table-bordered" id="tabla">
        <tr>
            <td colspan="4">
                <b>Mes Evaluado:</b> Enero<br>
                <b>Auditoria:</b> Supervisor<br>
                <b>Sucursal:Prueba1<br>
            </td>
        </tr>
                <tr>
                    <th>
                Categoria 1
                  </th>

                    <th colspan=3 style="text-align:center">
                    Calificación Categoria: 10
                    </th>
                </tr>
                
                <tr>
                    <th>Descripcion</th>
                    <th style="text-align:center">Calificación</th>
                    <th style="text-align:center">Nota</th>
                    <th style="text-align:center">Foto</th>
                </tr>
                    <tr>
                        <td>
                            100
                        </td>

                        <td style="text-align:center">
                             Nota de Prueba
                        </td>

                       <td style="text-align:center; width: 200px; height: 200px;">
                             <img style="width: 200px" src='img/img.jpg/>
                      </td>
                 </tr>
        </table>

Como ven aquí al final trato de añadir una imagen, en el código html si me lo muestra pero al hacer la importacion a PDF no me muestra la imagen.

Aquí les dejo el código js:

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

1 respuesta 1

0

Una opción sencilla que encontré fue en vez de convertirlo directamente a PDF, lo mandé a imprimir y de ahí ya lo guarde como PDF, el código que utilicé fue el siguiente:

  function printDiv(nombreDiv) {
    var contenido = document.getElementById(nombreDiv).innerHTML;
    var contenidoOriginal = document.body.innerHTML;

    document.body.innerHTML = contenido;
    window.print();
    document.body.innerHTML = contenidoOriginal;


  }
    <!-- añadi boton en html que me mande a la función en js para imprimir -->
    <a href="#" title="Imprimir" onclick="printDiv('areaImprimir')" value="imprimir div"><i
    class="fas fa-print fa-2x" style="color: #1095A1">&nbsp;&nbsp;</i></a>

Sólo añadí una etiqueta div a la tabla con el id area imprimir:

    <div class="table-responsive tblcenter" id="areaImprimir" style="width:55%;">
    <table class="table table-bordered" id="tabla">

obviamente hay que carrarla despues de que cierras el table.

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.