Compartir a través de

ASP.NET - Imprimir solo el contenido que esta dentro de un Div (es-ES)

  • Artículo

La forma recomendada para imprimir el contenido de un div es con JQuery, mediante el siguiente ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Print Part of a Page With jQuery</title>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jquery.print.js"></script>
    <script type="text/javascript">
  
        // When the document is ready, initialize the link so
        // that when it is clicked, the printable area of the
        // page will print.
        $(
            function(){
  
                // Hook up the print link.
                $( "a" )
                    .attr( "href", "javascript:void( 0 )" )
                    .click(
                        function(){
                            // Print the DIV.
                            $( ".printable" ).print();
  
                            // Cancel click event.
                            return( false );
                        }
                        )
                ;
  
            }
            );
  
    </script>
  
    <style type="text/css">
  
        body {
            font-family: verdana ;
            font-size: 14px ;
            }
  
        h1 {
            font-size: 180% ;
            }
  
        h2 {
            border-bottom: 1px solid #999999 ;
            }
  
        .printable {
            border: 1px dotted #CCCCCC ;
            padding: 10px 10px 10px 10px ;
            }
  
        img {
            background-color: #E0E0E0 ;
            border: 1px solid #666666 ;
            padding: 5px 5px 5px 5px ;
            }
  
        a {
            color: red ;
            }
  
    </style>
</head>
<body>
  
    <h1>
        Print Part of a Page With jQuery
    </h1>
  
    <p>
        <a>Print Bio</a>
    </p>
  
    <div class="printable">
  
        <h2>
            Jen Rish
        </h2>
  
        <p>
            Jen Rish, upcoming fitness and figure model has some
            crazy developed legs!
        </p>
  
        <p>
            <img
                src="jen_rish_crazy_legs.jpg"
                width="380"
                height="570"
                alt="Jen Rish Has Amazing Legs!"
                />
        </p>
  
        <p>
            I bet she does some <strong>serious squatting</strong>!
        </p>
  
    </div>
  
</body>
</html>

Otra forma para imprimir el contenido que esta dentro de un div vamos a usar Javascript:

function ImprimeDiv() 
{ 
  var divToPrint=document.getElementById('DivIdToPrint'); 
  var newWin=window.open('','Print-Window','width=100,height=100'); 
  newWin.document.open(); 
  newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>'); 
  newWin.document.close(); 
  setTimeout(function(){newWin.close();},10); 
}

Este JavaScript solo abrira una nueva ventana con el contenido del div, este se imprimira y luego se cerrara la ventana. Es muy importante el timeout de la ultima linea, de otra manera la ventana en IE se cerrara antes de que se imprima.

See Also