Print page and specific section with JavaScript

Home  >>  Tutorials  >>  Javascript  >>  Print page and specific section with JavaScript

Print page and specific section with JavaScript

2
Oct,2017

0

Whole Page : 

 If we want to print complete to print . we can do it with JavaScript Print() mehtod.

 

<!DOCTYPE html>
<html>
<body>

<p>Click the button to print the current page.</p>

<button onclick="myFunction()">Print this page</button>

<script>
function myFunction() {
 window.print();
}
</script>

</body>
</html>



 

 

Print Specific portion :

If we want to print specific portion then we need to implement some more works . Here’s are that .

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">

        $("#btnPrint").live("click", function () {

            var divContents = $("#dvContainer").html();

            var printWindow = window.open('', '', 'height=400,width=800');

            printWindow.document.write('<html><head><title>DIV Contents</title>');

            printWindow.document.write('</head><body >');

            printWindow.document.write(divContents);

            printWindow.document.write('</body></html>');

            printWindow.document.close();

            printWindow.print();

        });

    </script>

</head>

<body>

    <form id="form1">

    <div id="dvContainer">

        This content needs to be printed.

    </div>

    <input type="button" value="Print Div Contents" id="btnPrint" />

    </form>

</body>

</html>

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *