JavaScript Print Part of the Page Only

Way to print only part of the page using iframe as HTML duplicate container (http://www.dte.web.id)

by Shirly Manor

HTML

<div id="print-area-1" class="print-area">
    <div style="text-align:right;"><a class="no-print" href="javascript:printDiv('print-area-1');">Print</a></div>
    <h2>Lorem Ipsum</h2>
    <p>gh.</p>
</div>

<div id="print-area-2" class="print-area">
    <div style="text-align:right;"><a class="no-print" href="javascript:printDiv('print-area-2');">Print</a></div>
    <table border="1">
        <thead>
            <tr>
                <th>Table Header 1</th>
                <th>Table Header 2</th>
                <th>Table Header 3</th>
                <th>Table Header 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Division 1.1</td>
                <td>Division 1.2</td>
                <td>Division 1.3</td>
                <td>Division 1.4</td>
            </tr>
            <tr>
                <td>Division 2.1</td>
                <td>Division 2.2</td>
                <td>Division 2.3</td>
                <td>Division 2.4</td>
            </tr>
            <tr>
                <td>Division 3.1</td>
                <td>Division 3.2</td>
                <td>Division 3.3</td>
                <td>Division 3.4</td>
            </tr>
        </tbody>
    </table>
</div>

<div id="print-area-3" class="print-area">
    <div style="text-align:right;"><a class="no-print" href="javascript:printDiv('print-area-3');">Print</a></div>
    <ul>
        <li>This is an example list 1</li>
        <li>This is an example list 2</li>
        <li>This is an example list 3</li>
        <li>This is an example list 4</li>
    </ul>

    <ol>
        <li>This is an example list 1</li>
        <li>This is an example list 2</li>
        <li>This is an example list 3</li>
        <li>This is an example list 4</li>
    </ol>
    <ol>
        <li>This is an example list 1</li>
        <li>This is an example list 2</li>
        <li>This is an example list 3</li>
        <li>This is an example list 4</li>
    </ol>
    <ol>
        <li>This is an...

CSS

body {padding:30px}
.print-area {border:1px solid red;padding:1em;margin:0 0 1em}

JavaScript

function printDiv(elementId) {
    var a = document.getElementById('printing-css').value;
    var b = document.getElementById(elementId).innerHTML;
    window.frames["print_frame"].document.title = document.title;
    window.frames["print_frame"].document.body.innerHTML = '<style>' + a + '</style>' + b;
    window.frames["print_frame"].window.focus();
    window.frames["print_frame"].window.print();
}