Print a page angularJS

Question

i would like to print a given page with angulaJS, so a did this simple solution:

<div class="modal fade" id="extrait" aria-hidden="true" data-backdrop="false">
        <table class="table table-hover table-bordered" id="tab1">   
             <thead>
                <tr class="row-name" >
                   <th >Banque</th>
                   <th>N. Cheque</th>
                   <th>Montant</th>
                </tr>      
             </thead>   
             <tbody>
                <tr class="row-content"  ng-repeat="cl in extraits">          
                        <td>{{cl.nomBanque}}</td>
                        <td>{{cl.numCheque}}</td>
                        <td>{{cl.montant}}</td>             
                </tr>       
             </tbody>
        </table>  
        <div class="btn-group" role="group">            
       <button id="btnPrint" class="btn btn-info btn-block" ng-click="print()">Print</button> 
       </div>
 </div>


    <script>
        $scope.print=function(){        
                            $window.print();                
                };
    </script>

It works, but when i have a long list to print, so it print only one page, and the scrollbar appear. Iould like to print pag 1, page 2 .... Can you have any suggestion please. Thanks.

Lotus91 · Accepted Answer · 2018-02-23 14:18:31Z

1

You could use css3 media queries for printing as follow:

@media print {
  body, html, #wrapper {
      width: 100%;
  }
}

Or you could use a separate css file and use percentage values as below:

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

print.css :

body, html, #wrapper {
width: 100%;
}

answered Feb 23, 2018 at 14:18

Lotus91

1,1234 gold badges18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gary Over a year ago

I did the second solution: so in print.css i have: #extrait{width:100%} but the same problem the scroll bar appear and only one page

Gary Over a year ago

I think the problem come from the modal, because the content that i would like to print inside a model. And when i try to print a normal page it works, but with modal there is a problem.

Lotus91 Over a year ago

here you go an plnkr with a modal plnkr.co/edit/TV0ttEAw4LWJ6sGLjSTR?p=preview

Gary Over a year ago

Thank you, it works. i just added : #print-content * { visibility: visible; overflow: visible; } and the other model's css property in print.css

Collectives™ on Stack Overflow

Print a page angularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related