个人中心
gpt4 book ai didi

javascript - 打印应用了 CSS 样式的 Angular 网页

转载 作者：行者123 更新时间：2023-11-28 15:31:52 24 4
gpt4 key购买 nike

我看到很多帖子询问如何使用 CSS 样式打印网页，但没有一个解决方案适合我。这是网页的样子:Webpage

我需要它来打印所有颜色编码，但是当我去打印它时，我得到了这个乱七八糟的东西:Webpage print preview

为了使这份报告成功，它需要用着色打印，有人可以帮我用着色打印吗？

我已经试过了

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

这仍然不能解决我的问题。

这是我的代码:

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>

应用程序.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;
}

应用程序.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();
            })
    });

最佳答案

要在 Chrome 中启用后台打印:

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

此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它:它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为可能会在未来发生变化。

但是，它仅在 Google Chrome 和 Safari 6.0 中受支持。否则你无法在其他浏览器中打印背景颜色。

关于javascript - 打印应用了 CSS 样式的 Angular 网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44571567/

24 4 0
文章推荐： html - 在 IE11 的表格单元格的顶部和底部有一个带有填充的边框
文章推荐： javascript - 如何更改 fullcalendar.js 中的 "AgendaDay"日标题格式
文章推荐： javascript - 在 'for' 循环迭代之间添加延迟
文章推荐： javascript - 是否有任何库可以识别任何格式的日期？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com