Resources For IT Professionals
Post an article
Wikis - Page Details
  • First published by
  • When: 5 Jun 2012 2:39 PM
  • Last revision by (aMicrosof)
  • When: 15 Feb 2013 8:40 PM
  • Revisions: 4
  • Comments: 1
Options
RSSSubscribe to Article (RSS)
Can You Improve This Article?
Positively! Click Sign In to add the tip, solution, correction or comment that will help other users.

Report inappropriate content using these instructions.
Wiki  >  TechNet Articles  >  ASP.NET - Imprimir solo el contenido que esta dentro de un Div (es-ES)

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

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

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.

, , , , , , , [Edit tags]
Leave a Comment
  • Please add 2 and 6 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Sort by: Published Date | Most Recent | Most Useful
Comments
  • 5 Jun 2012 9:01 PM

    Ed Price - MSFT edited Original. Comment: Added Spanish tag and title language code

Page 1 of 1 (1 items)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • Posted by
    on 5 Jun 2012 9:01 PM

    Ed Price - MSFT edited Original. Comment: Added Spanish tag and title language code

Page 1 of 1 (1 items)