Print Angular webpage with CSS styling applied to it

Question

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();
            })
    });

Which browser are you using? When I print your page in Chrome I get all the style and colours. — Jean-Michel Provencher
– Jean-Michel Provencher, Commented Jun 15, 2017 at 15:40
Strange, I'm using chrome. Maybe my browser is out of date. I'll try again, thank you for looking. — Jasmine D
– Jasmine D, Commented Jun 15, 2017 at 15:47

Jean-Michel Provencher · Accepted Answer · 2017-06-15 15:48:17Z

1

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.

answered Jun 15, 2017 at 15:48

Jean-Michel Provencher

7336 silver badges16 bronze badges

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

1 Comment

Jasmine D Over a year ago

Thank you! This worked perfectly and thank you for the information!

Collectives™ on Stack Overflow

Print Angular webpage with CSS styling applied to it

index.html

app.css

app.js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

index.html

app.css

app.js

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related