CODEWITHSUNDEEP
javascripthtmlcssangularjscolors
Jasmine D
Jasmine D

Reputation: 75

Print Angular webpage with CSS styling applied to it

I've seen many posts asking for a way to print a webpage with the CSS Styling and none of the solutions have worked for me. This is what the webpage looks like: Webpage

I need it to print with all of the color coding, but when I go to print it I get this mess: Webpage print preview

In order for this report to be a success it needs to print with the coloring, can someone help me print this with the coloring?

I've already tried 

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

This still did not help with my issue.

Here is my code:

index.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" media="screen, print" href="app.css" />
    <script src="js/angular.js"></script>
    <script src="js/domo.js"></script>
    <script src="js/app.js"></script>      
  </head>
  <body ng-app="rcr_sched" ng-controller="main">
      <div id="mydiv">
        <table>
            <tr>
            <button onclick="print('#mydiv')">Print This Page</button>   
            </tr>
            <tr>
                <th ng-repeat="prop in columns">{{prop.date}}</th>
            </tr>  
            <tr ng-repeat="r in data">
                <td align="center" ng-repeat="prop2 in columns" class="{{getColor(r.TeamRank, r.Team, prop2.title)}}" style="{{isPTO(prop2.title, 'PTO' + prop2.title, r['PTO' + prop2.title])}}">
                    {{r[prop2.title]}}
                </td>
            </tr>
        </table>
      </div>      
  </body>
</html>

app.css

body{
  margin: 0;
    padding: 0;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 8 px;
}

table, th, td {
    border: 2px solid white;
    border-collapse: collapse;
    background-color: #F2F2F2;
    padding-right: 10px;
    padding-left: 10px;
}
th:nth-child(n+22){
    background: white;
    color: white;
}

td:nth-child(n+22) {
    background: white;
    color: white;


}

.redClass {
    background-color: #ffbbb3;
}

.blueClass {
    background-color: #b3d1ff;
}

.grayClass {
    background-color: #F2F2F2;
}

.goldClass {
    background-color: #efe68f;
}

.greenClass {
    background-color: #b0e89f;
}

.ptoClass {
    background-color: yellowgreen;
}

.highlightClass {
    background-color: #FEF65B;
}


.hideClass {
    background-color: white;
    color: white;
}

app.js

angular.module('rcr_sched', [])
    .controller('main', function ($scope) {
        $scope.title = "Recruiter Schedule";
        $scope.data = [];
        $scope.columns = [];
        $scope.currentDate = new Date();
        $scope.calculateDate = function() {
            var x = new Date();
            return {
                'MonThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 1)), title:'MonThisWk'},
                'TueThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 2)),title:'TueThisWk'},
                'WedThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 3)),title:'WedThisWk'},
                'ThuThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 4)),title:'ThuThisWk'},
                'FriThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 5)),title:'FriThisWk'},
                'MonNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 1)),title:'MonNextWk'},
                'TueNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 2)),title:'TueNextWk'},
                'WedNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 3)),title:'WedNextWk'},
                'ThuNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 4)),title:'ThuNextWk'},
                'FriNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 5)),title:'FriNextWk'},
                'Mon2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 1)),title:'Mon2Wks'},
                'Tue2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 2)),title:'Tue2Wks'},
                'Wed2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 3)),title:'Wed2Wks'},
                'Thu2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 4)),title:'Thu2Wks'},
                'Fri2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 5)), title:'Fri2Wks'}
            }
        }
        $scope.isPTO = function(rowTitle, ptoTitle, value) {
            if (rowTitle == (ptoTitle.replace('PTO', '')) && value) {
                return 'background-color: #32CD32;';
            }
            return '';
        }

        function print(elem){
            Popup($('<div/>').append($(elem).clone()).html());
        }

        function Popup(data) 
{
    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head><title>my div</title>');
    mywindow.document.write('<link rel="stylesheet" href="http://www.dynamicdrive.com/ddincludes/mainstyle.css" type="text/css" />');
    mywindow.document.write('</head><body>');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

    mywindow.print();
  //  mywindow.close();
    return true;
}

        $scope.dateOptions = $scope.calculateDate();
        $scope.getColor = function(teamRank, team, prop) {
            let today = new Date();

            if (prop == 'Team' || prop == 'TeamMember') 
            {
                if (team == 'Unassigned') 
                {
                    return "grayClass";
                }
                else if (team == 'Gold One') 
                {
                    return "goldClass";
                }
                else if (team == 'Red One' || team == 'Red Two') 
                {
                    return "redClass";
                }
                else if (team == 'Blue One' || team == 'Blue Two') {
                    return "blueClass"
                }
                else if (team == 'Green One') 
                {
                    return "greenClass";
                }
                else
                {
                    return "grayClass";
                }
            }
            if(prop == 'MonThisWk' || prop == 'Mon2Wks')
           {
               if(today.getDay() == 1)
               {
                    return "highlightClass";   
               } 
           }
           if(prop == 'TueThisWk' || prop == 'Tue2Wks')
           {
               if(today.getDay() == 2)
               {
                    return "highlightClass";   
               }
           }
           if(prop == 'WedThisWk' || prop == 'Wed2Wks')
           {
               if(today.getDay() == 3)
               {
                    return "highlightClass";   
               }
           }
           if(prop == 'ThuThisWk' || prop == 'Thu2Wks')
           {
               if(today.getDay() == 4)
               {
                    return "highlightClass";   
               }
           }
            if(prop == 'FriThisWk' || prop == 'Fri2Wks')
           {
               if(today.getDay() == 5)
               {
                    return "highlightClass";   
               }
           }




        }
        //Add domo.get to a function. 
        // Remove scope.apply()
        //scope.Fields record
        //scope.SumFields scope.SumFields.join(',')

        domo.get('data/v1/master?fields=Team,TeamMember,TotalJobs,NDD,Past,MonThisWk,TueThisWk,WedThisWk,ThuThisWk,FriThisWk,MonNextWk,TueNextWk,WedNextWk,ThuNextWk,FriNextWk,Mon2Wks,Tue2Wks,Wed2Wks,Thu2Wks,Fri2Wks,FutureDates,PTOMonThisWk,PTOTueThisWk,PTOWedThisWk,PTOThuThisWk,PTOFriThisWk,PTOMon2Wks,PTOTue2Wks,PTOWed2Wks,PTOThu2Wks,PTOFri2Wks,PTOMonNextWk,PTOTueNextWk,PTOWedNextWk,PTOThuNextWk,PTOFriNextWk&groupby=TeamRank,TeamMember,Team&orderby=TeamRank')
            .then(function(data){
                $scope.data = data;
                /*
                    for (d of data) {
                        if (d.PTO == true ) {
                            d['class'] = ptocolor
                        }
                        else {
                            d['class'] = ptocolor
                        }

                    }
                */
//                data[1]['PTOMonThisWk'] = 1;
                for (prop in data[0]) {
                    if ($scope.dateOptions[prop]) {
                        var newDate = $scope.dateOptions[prop];
                        var formattedProp = {date: (newDate.date.getMonth() + 1).toString() + '/' + newDate.date.getDate().toString(), title: newDate.title};
                    }
                    else {
                        var formattedProp = {title: [prop], date: null};
                    }
                    $scope.columns.push(formattedProp);
                }
                $scope.$apply();
            })
    });

Upvotes: 2

Views: 3745

Answers (1)

Jean-Michel Provencher
Jean-Michel Provencher

Reputation: 735

To enable background printing in Chrome:

body {
  -webkit-print-color-adjust: exact;
}

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

However, it is only supported in Google Chrome and Safari 6.0. Otherwise you can't print background-color in other browser.

Upvotes: 1

Related Questions