How to apply css style when using ng-print inAngular JS

Question

I have created PHP page using angular JS. Now, I want to print that page as well as. I have added ngPrint in my app.js and also assign id to the main div. on page preview data are showing perfectly but without css property. I also added ngPrint.css and ngPrint.js .

my code in header section :-

<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/angular.min.js"></script>   
<script src="app/app.js"></script>
<!-- ng-print -->
<link rel="stylesheet" type="text/css" href="css/ngPrint.css">
<script src="js/ngPrint.js"></script>
<!--/ ng-print -->

on app.js :-

var mainApp = angular.module("IncomeBenefit", ['ngPrint']);

on display page:-

    <div class="main" id="printSectionId" ng-app="IncomeBenefit">
    <h1 class="main_h1_calc">Calculator</h1>    
        <div class="col-main-w-12" ng-controller="displayController">
            <div class="col-main-w-5">
                <div class="form-header-main" ng-repeat="X in names">

                                    <!-- form section -->                           
                                    <div class="form-header">
                                        <div class="form-header-l">Client Age</div>     
                                        <div class="form-header-r">{{X.client_age}}</div>       
                                    </div>                              
                                    <!--/ form section -->      
                </div>
            </div>
<button class="btn btn-primary" ng-print print-element-id="printSectionId"><i class="fa fa-print"></i> Print</button>
                </div>
            </div>

I don't have any idea. How to add css property to my printable data. I have also tried inline css but can't succeeded . What can I do ?

thepio · Accepted Answer · 2016-08-12 08:21:47Z

1

In your style.cssfile try adding the following and see what happends:

@media print {
  body { border: 15px solid black; }
}

You have to use @media print to apply print styles and include evertyhing inside it but please remember that css support is somewhat limited when printing.

A good tutorial to get started with

edited Aug 12, 2016 at 8:21

answered Aug 12, 2016 at 8:16

thepio

6,2635 gold badges38 silver badges55 bronze badges

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

2 Comments

Ranjeet singh Over a year ago

I have tried it and its working fine but when I have added @media print { .main_h1_calc { background-color: red!important; } } than its not working.

thepio Over a year ago

Google/Read about restrictions (what will work and what will not) in printing with browsers. The specific problem with background-color -> stackoverflow.com/a/3894013/2003702

Collectives™ on Stack Overflow

How to apply css style when using ng-print inAngular JS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related