0

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 ?

Ranjeet singh
  • 794
  • 1
  • 16
  • 38

1 Answers1

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

thepio
  • 6,193
  • 5
  • 35
  • 54
  • 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. – Ranjeet singh Aug 12 '16 at 08:56
  • Google/Read about restrictions (what will work and what will not) in printing with browsers. The specific problem with background-color -> http://stackoverflow.com/a/3894013/2003702 – thepio Aug 12 '16 at 09:25