CODEWITHSUNDEEP
javascripthtmlcssangularjs
Devesh Agrawal
Devesh Agrawal

Reputation: 9212

How to print a specific section in HTML page Angular JS

Parent page

<div class="row">
    <div class="col-md-3">
        link 1
        link 2
        link 3
        .
        .
        .
    </div>
</div>

<div class="col-md-9">
    <div ng-view></div>
</div>

When link is clicked child page will be loaded in ng-view>

<table class='table table-bordered'>
    <tr>
        <td>
            this is my screen view
            when user clicks a link in parent page 
            specific contentd loaded here
        </td>
    </tr>
</table>    


<button type="button" class="btn btn-success btn-md" ng-click="myprint()" >
    <span class="glyphicon glyphicon-print"></span> Print
</button>


<div id ="printsection">
    <table style="width:80mm;">
        <tr style="text-align: center;">
            <td>this is my print view contents
                send these contents 
                to print to printer
            </td>
        </tr>
    </table>
</div>

Above child page have 2 sections. screen view and printsection.

I want when user clicks on print button, printsection contents send to printer.

I have define these CSS rules for media print.

print.css

body {
    background-color: white;
    color: black;
    font-family: Times,"Times New Roman",Garamond, serif;
}
body * {
    visibility: hidden;
}
#printsection * {
    visibility: visible;
}
#printsection {
    position: absolute;
    left: 0;
    top: 0;
}

Problem is on click of print button, its hiding all the contents, even the print section.

What i am doing wrong?

Please note i am using POS printer 80mm width, dats i made width = 80mm in printsection.

Upvotes: 0

Views: 6511

Answers (3)

Rentering.com
Rentering.com

Reputation: 399

You can use a simple function to replace the page and print as well.

<button onclick="printElement('my-section')">Print</button>

function printElement(id) {
    var printHtml = document.getElementById(id).outerHTML;
    var currentPage = document.body.innerHTML;
    var elementPage = '<html><head><title></title></head><body>' + printHtml + '</body>';
    //change the body
    document.body.innerHTML = elementPage;
    //print
    window.print();
    //go back to the original
    document.body.innerHTML = currentPage;
}

Are you setting changing the visibility to visible for the "printsection" when you click the print button?

I would use the following css rules for visibility. 

display:none, display:block.

Upvotes: 3

felipsmartins
felipsmartins

Reputation: 13549

I'm so sure that must use CSS media rules - @media print, on this case. Take a look:

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <style>

        @media all {
            /* media-specific rules, suitable for all devices. */
        }

        @media screen {
            /* acreen media-specific rules */
        }

        @media only print {
            /* Intended for paged material and for documents
               viewed on screen in print preview mode .*/
            main {
                display: none;
            }
        }
    </style>
</head>
<body>
    <main>
        <button onclick="window.print()">Print</button>
        <h1>hello</h1>
        <p>Some paragraph</p>
    </main>

    <div id="print-section">
        <h2>subtitle</h2>
        <table border="1" width="50%">
            <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>C</td>
                <td>D</td>
            </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

So when user press CTRL + P or clicking on button invoking window.print(), everything outside of main tag will be printed. It is the best approach.

From the docs:
Syntax: 

@media <media-query> {
  /* media-specific rules */
}

Upvotes: 0

Mathew Berg
Mathew Berg

Reputation: 28750

You didn't make the printSection itself visible. Same with all it's parents. So you'll have to do something like this:

#printSection{
    visibility: visible;
}

And all of it's parents since you hid all of them with body *{ ... }

Upvotes: 0

Related Questions