How to print a specific section in HTML page Angular JS

Question

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.

This should cover you: http://stackoverflow.com/questions/22189544/print-a-div-using-javascript-in-angularjs-single-page-aplication — Mike Feltman, Oct 06 '15 at 16:42
My print routine is: $scope.myprint = function(){ window.print(); } — Devesh Agrawal, Oct 06 '15 at 16:42
since visibility inherits, one can't hide any elements above the interesting parts. above as in document child node depth, not visually. hide all the other parts in the container that your printable text is in, and hide any container that doesn't have your printable text. — dandavis, Oct 06 '15 at 16:43

score 3 · Answer 1 · edited Oct 17 '17 at 08:23

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.

score 0 · Answer 2 · answered Oct 06 '15 at 16:47

0

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 *{ ... }

answered Oct 06 '15 at 16:47

Mathew Berg

28,625
11
69
90

No you're not. You're doing `#printsection * {` which is going to do all of it's children, not that section itself. Also as I said you're hiding all the parents. – Mathew Berg Oct 06 '15 at 20:30

felipsmartins · Answer 3 · 2015-10-06T17:02:33.077

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 */
}

Thanks for your response. The problem here is i don't to print everything outside main. In child page i want to print only some specific portion. — Devesh Agrawal, Oct 06 '15 at 16:58
@DeveshAgrawal So just put your specific rules inside `@media print {}` or `@media screen {}` — felipsmartins, Oct 06 '15 at 17:01

How to print a specific section in HTML page Angular JS

3 Answers3