列印有CSS样式的Angular网页 [英] Print Angular webpage with CSS styling applied to it
本文介绍了列印有CSS样式的Angular网页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我看到很多帖子都在要求一种使用CSS样式打印网页的方法，但没有一种解决方案适合我。
这是网页的外观：网页
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?
我已经尝试过
<link rel="stylesheet" type="text/css" media="all" href="app.css" />
这仍然对我的问题没有帮助。
This still did not help with my issue.
这是我的代码：
<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
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
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();
})
});
推荐答案
要在Chrome中启用后台打印：
To enable background printing in Chrome:
body {
-webkit-print-color-adjust: exact;
}
此功能不是标准功能，也不在标准轨道上。请勿在面向Web的生产站点上使用它：它不适用于每个用户。实现之间也可能存在较大的不兼容性，并且将来的行为可能会发生变化。
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.
但是，仅Google Chrome和Safari 6.0支持该功能。否则，您将无法在其他浏览器中打印背景色。
However, it is only supported in Google Chrome and Safari 6.0. Otherwise you can't print background-color in other browser.
这篇关于列印有CSS样式的Angular网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![网页](\"https://i.stack.imgur.com/FSBKm.png\"){kind=link}