Skip to content Skip to sidebar Skip to footer

How To Print Some Specific Part Of A Page Via Window.print()

i'm working on a form in php mysql. so in my page there is a form and below that i shown the data of that form in table format.now i want to print only the table structure thats wh

Solution 1:

Use css to hide elements you don't want to print:

@media print {
    .control-group {
      display: none;
    }
}

Solution 2:

function printContent(el){
    var restorepage = document.body.innerHTML;
    var printcontent = document.getElementById(el).innerHTML;
    document.body.innerHTML = printcontent;
    window.print();
    document.body.innerHTML = restorepage;
}
<!DOCTYPE html>
<html>
<head>

</head> 
<body> 
<h1>My page</h1>
<div id="div1">DIV 1 content...</div>
<button onclick="printContent('div1')">Print Content</button>
<div id="div2">DIV 2 content...</div>
<button onclick="printContent('div2')">Print Content</button>
<p id="p1">Paragraph 1 content...</p>
<button onclick="printContent('p1')">Print Content</button>
</body> 
</html>

Solution 3:

You could make a print-css (which does the same as @media print, but I think it is cleaner, and you can disable the css include via javascript, if you need it):

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

In that css, you hide all elements which should not get printed, for example:

.wrapper, .header {display: none;}

Solution 4:

One posible solution, perhaps not the best option:

1. Open a new window with JS
2. Copy the whole table into the new window (with jQuery for example)
3. Print the new window
4. Close the window

Sure it has a blink effect but It will work.


Post a Comment for "How To Print Some Specific Part Of A Page Via Window.print()"