4

tengo una tabla que la genero dinamicamente en mi aplicación mvc.

Utilizo SQLServer para traer mis datos.

Lo que yo debo hacer es imprimir la tabla que muestro en la imagen. No se que me conviene mas, si convertir a PDF o imprimir directamente la tabla.. Le agregue un boton para poder imprimir la tabla entera.

Dejo mi codigo. Si falta agregar algo mas de mi codigo lo edito y agrego, me parece que con esto es suficiente.

He estado probando con jquery pero tampoco me ha salido, les paso una imagen de como seria mi tabla y como quiero que sea la impresion. La imagen es un base64 traido de mi BD y convertido en imagen.

@if (IsPost && Model.datos != null)
{
    if (Model.datos.Count > 0)
    {
<div id="div_resultados">

    <table id="tablaCD" class="table table-bordered table-responsive table-hover">

        <tr style="background-color:#78C2AD">

            <th>
                Id Comprobante
            </th>

            <th>
                Casa
            </th>
            <th>
                Fecha
            </th>
            <th>
                Monto depositado
            </th>

            <th>
                Comentarios
            </th>

            <th>
                Foto
            </th>

        </tr>
        @if (Model.datos != null)
        {

        foreach (var i in Model.datos)
        {

        <tr>
            <td>
                @i.idComprobante
            </td>

            <td>
                @i.Casa
            </td>

            <td>
                @i.Fecha
            </td>
            <td>
                @i.Monto
            </td>

            <td>
                @i.Comentarios
            </td>

            <td>
                <img class="zoomable" src="@i.Foto" width="150" height="150">

            </td>
            <td>
                <button id="btnImprimir" onclick="ImprimirImagen" >Imprimir</button>
            </td>
        </tr>
        }
        }
    </table>

</div>
    }
    else
    {
        @ViewBag.Message;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

introducir la descripción de la imagen aquí

5
  • 1
    Cuando dices imprimir es literal ? o la quieres mostrar mas grande en un modal ? o presentas un error al PINTAR la imagen en la tabla ? Commented el 22 oct. 2019 a las 15:18
  • sii literal, hice un cambio en la pregunta porque tuve que tomar otro camino,, Tengoq ue imprimir la tabla entera, o convertirla a pdf y despues de ahi imprimirla
    – tato8vio
    Commented el 22 oct. 2019 a las 15:31
  • has pensado en printArea ? Nesecitas que se imprima con estilos ? Commented el 22 oct. 2019 a las 15:38
  • si, he estado probando con printArea pero no he podido! No, mientras pueda imprimir la foto qu muestra la tabla, ni importa los estilos
    – tato8vio
    Commented el 22 oct. 2019 a las 17:03
  • Si si pones la visualizacion de la imagen en un modal y utilizas print area, No imprir directamente en la tabla si no es un detalle para visualizar la imagen Commented el 22 oct. 2019 a las 17:21

1 respuesta 1

2

Te dejo un ejemplo funciona, Esta es una opcion de como hacerlo, tienes que agregar un botón con el cual puedas visualizar la imagen a imprimir , dentro del modal agregas el botón con el cual imprimes la imagen.

Agregue una clase para Media.print para que los demás elementos no aparezcan.

Revisa este Snippet:

$( document ).ready(function() {
  $("#ImprimirImg").click(function (){
       window.print();
  })
});
@media print{
    .doNotPrint{display:none !important;}
}
<script src="https://dl.dropboxusercontent.com/u/36032609/printThis.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div id="div_resultados" class="doNotPrint">

    <table id="tablaCD" class="table table-bordered table-responsive table-hover doNotPrint">
        <tr style="background-color:#78C2AD">
            <th>
                Id Comprobante
            </th>
            <th>
                Casa
            </th>
            <th>
                Fecha
            </th>
            <th>
                Monto depositado
            </th>
            <th>
                Comentarios
            </th>
            <th>
                Foto
            </th>

        </tr>
         <tr>
            <td>
                @i.idComprobante
            </td>

            <td>
                @i.Casa
            </td>

            <td>
                @i.Fecha
            </td>
            <td>
                @i.Monto
            </td>

            <td>
                @i.Comentarios
            </td>

            <td>
                <img class="zoomable" src="http://2.bp.blogspot.com/-TMy7BOvV5rM/TueumWbb_aI/AAAAAAAAAQo/Z0jardFmbPo/s1600/WPN%2BSuper%2B1.jpg" width="150" height="150">

            </td>
            <td>
                <button id="btnImprimir" class="btn btn-success" data-toggle="modal" data-target="#MyModalOpen" >Ver</button>
            </td>
        </tr>
    </table>

</div>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<!-- Modal -->
<div class="modal fade" id="MyModalOpen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header doNotPrint">
        <button type="button" class="close doNotPrint" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Titulo</h4>
      </div>
       <div class="modal-body">
       <div id="areaImprime">
        <img class="zoomable" src="http://2.bp.blogspot.com/-TMy7BOvV5rM/TueumWbb_aI/AAAAAAAAAQo/Z0jardFmbPo/s1600/WPN%2BSuper%2B1.jpg" width="350" height="280">
      <div>
      </div>
       <div class="modal-footer doNotPrint">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="ImprimirImg">Imprimir</button>
      </div>
      
    </div>
  </div>
</div>

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.