Question

下面的代码包含我的HTML设计我需要将此页面转换为pdf并需要保留CSS作为它，为什么我需要转换此页面，因为我需要此页面来打印格式，当它被给予打印时它没有采取CSS如何保留我的CSS，其中包括背景颜色和边距也请问我还有其他选择，感谢。

	var polyline = '12.936854864994,77.5798794621825|12.9372786617187,77.5795438103076|12.9376865712695,77.5792017276878|12.9380799281526,77.5788718478664'
        +'|12.9384392837988,77.5785879170691 |12.9389869783469,77.5781753480576|12.9396059926507,77.5777090523148|12.9397944,77.5771998|12.9403249487445,77.5768761233983'
		+'|12.9410563104378,77.5768892460254|12.9416859975384,77.5768709109948|12.9424948179519,77.5768645042835|12.9431014792937,77.57687556048'
		+'|12.9435641926018,77.5769055047861|12.9441531310226,77.5768929836141|12.9549153210465,77.5722708007325|12.955565697725,77.5723065941437'
		+'|12.9560406382465,77.5723149263702|12.9567013594207,77.572251566951|12.9571469452371, 77.5721823375503';
	
	var img1 = 'destinationmarker.png';
	var img2 = 'pickupmarker.png';
	swap();
			  function swap() {
        document.getElementById('my-image-id').src ='http://maps.googleapis.com/maps/api/staticmap?center=12.955565697725,77.5723065941437&zoom=12&scale=2&size=461x285&maptype=roadmap'
+'&markers=anchor:32,10%7Cicon:https://35.154.52.48:4000/Ebill/WEB-ASSETS/drawable-mdpi/pickupmarker.png|12.936854864994,77.5798794621825&markers=icon:https://35.154.52.48:4000/Ebill/WEB-ASSETS/drawable-mdpi/destinationmarker.png|12.9571469452371, 77.5721823375503&path=color:0x000000|weight:1|'+polyline+'&key=AIzaSyAX968fyMNrdmJnbcW5luao0a4g2zK0cH0&sensor=false'; 
    }

 .removemarginleftindestination{
 margin-left:3.1%;
 margin-top:28px;
	}

.removemarginleftindestination_upper{
margin-left:3.2%;
margin-top:38px;
}

.removemarginleftinsource{
			  margin-left:3.1%;
			  margin-top:28px;
			  }
  .removemarginleftinsource_upper{
  margin-left:3.2%;
  margin-top:38px;
  }
			  
			  
 @media only screen and (max-width: 620px) {
			.imagemediaquery {
				width :280px;
				height :285px;
			}
			.removemarginleftindestination{
			margin-left:0px;
			}
			.removemarginleftindestination_upper{
			margin-left:0px;
			}
			.removemarginleftinsource{
			margin-left:0px;
			}
			.removemarginleftinsource_upper{
			margin-left:0px;
			}
		}
		
					 @media only screen and (max-width: 360px) {
			.imagemediaquery {
				width :310px;
				height :285px;
			}
}
		
  .wrapper {
  width:78.3%;
  margin:0 auto;
  margin-top:3%;
  
}
.cashalign{
	   margin-left:99px;
	   margin-top:38px;
	   }
	    @media only screen and (max-width: 1200px) {
			.cashalign{
			   margin-left:0px;
			   margin-top:30px;
			   text-align:center;
			   }
		}
		
.carimage_name{
	  margin-left:73px;
	  margin-top:22px
	  }
 @media only screen and (max-width: 1200px) {
			.carimage_name{
			   margin-left:0px;
			   margin-top:35px;
			     text-align:center;
			   }
		}
				  
.col:not(:first-child),.col:not(:last-child) {
  padding-right:7px;
  padding-left:7px;
}

.content {background-color:#efefef;}

div.rightside{
	border-right: 1px solid #eaeaea;
}
div.firrstbox{
z-index:10;
position: relative;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24) !important;
}
.bottomshadow{
box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);
}

@media only screen and (max-width: 412px){
.littledown_for_divtag{
	margin-top:20px;
	}
	.divmargintop_fare{
	margin-top:20px;
	}
	.name_and_number{
	text-align:center
	}
	}
	
	 @media only screen and (max-width: 1200px) {
			.carimage_name{
			   margin-left:50px;
			   margin-top:35px;
			     text-align:center;
			   }
		}

<!DOCTYPE html>
<html lang="en">
<head>
    
  <title>Ebill</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style='background-color:#5ec0cb'> 
  <div class='container'>
	<div class='row'>
		<div class='col-lg-12 col-xs-12' style='text-align:center'>
		<img src='images/Logo.png' width='175px' height='46px' style='margin-top:3%'/>
		</div>
	</div>
  </div>
<div class="wrapper">
  <div class="row" style='background-color:#ffffff'>
    <div class="col-md-12 col firrstbox" style='background-color:#ffffff'>
	  <div style='min-height:78px'>
       <div class="row">
         <div class="col-md-1 col">
		 
		 </div>
		  <div class="col-md-4 col-xs-12 col">
		
			<h4 style='font-family:Roboto;font-size:20px;margin-top:27px'>Trip ID : 1234567890123456</h4>
			
		 </div>
		  <div class="col-md-1 col">
		 
		 </div>
		  <div class="col-md-3 col-xs-12 col">
			<h4 style='font-family:Roboto;font-size:20px;margin-top:27px'>Date :<span  style='font-family:Roboto;font-size:20px;margin-top:3.4%'> 29/11/2016</span></h4>
		 </div>
		  <div class="col-md-3 col-xs-12 col">
			<h4 style='font-family:Roboto;font-size:20px;margin-top:27px'>Time :<span  style='font-family:Roboto;font-size:20px;margin-top:3.4%'> 9.30 PM</span></h4>
		 </div>
	   </div>
	  </div>
	  
	   
	</div>
   
		<div class="col-md-6 col-xs-12" style="position: relative;min-height:304px; padding-left: 0px;  padding-right: 0px;">
		<div >
			<img  id="my-image-id" class='imagemediaquery' width='543px'height='304px'>
		</div>
		</div>
		
		    <div class="col-md-6 col-xs-12">
			 <div class="col-md-1 col-xs-2 col removemarginleftinsource_upper">
				<img src='images/Group 2.png' width='24px' height='24px'>
			  </div>
			   <div class="col-md-6 col-xs-10 col removemarginleftinsource">
				<h4 style='font-family:Roboto;font-size:24px;'>JP Nagar 1st Phase</h4>
			   </div>
			</div>
			<div class="col-md-6 col-xs-12">
			 <div class="col-md-1 col-xs-2 col removemarginleftindestination_upper">
				<img src='images/Group.png' width='24px' height='24px'>
			  </div>
			   <div class="col-md-6 col-xs-10 col removemarginleftindestination">
				<h4 style='font-family:Roboto;font-size:24px;'>Indira Nagar</h4>
			   </div>
			</div>
			<div class="col-md-6 col-xs-12" style='margin-top:35px;background-color:#eaeaea;'>
			</div>
			
			<div class="col-md-6 col-xs-12" style='background-color:#ffffff;'>
			<div class="col-md-12 col-xs-12" style='background-color:#ffffff;min-height:15px'></div>
				<div class="col-md-6 col-xs-12 rightside" >
					<div class="col-md-2 col-xs-2 col"style='margin-left:4%;'>
					<img src='images/distance.png' width='32px' height='19px'>
				  </div>
				   <div class="col-md-7 col-xs-8 col" style='margin-left:11px;margin-top:-8px'>
					<h4 style='font-family:Roboto;font-size:18px;color:#5ec0cb'>Total distance</h4>
				   </div>
				   <div class="col-md-10 col-xs-10 col" style='background-color:#eaeaea;'>
						<div style='  background-color:#eaeaea;'></div>
				   </div>
				   <div class="col-md-12 col-xs-12 col" style='font-family:Roboto;font-size:32px;margin-left:5.8%;margin-top:8px'>
						<span style='font-family:Roboto;font-size:32px;margin-left:5.8%;margin-top:8px'>100</span><span style='margin-top:8px;font-family:Roboto;font-size:20px;margin-left:5.8%;'>Kms</span>
				   </div>
				</div>
				
				
				<div class="col-md-6 col-xs-12 littledown_for_divtag" >
					<div class="col-md-2 col-xs-2 col"style='margin-left:4%;'>
					<img src='images/clock.png' width='18px' height='18px'>
				  </div>
				   <div class="col-md-7 col-xs-9 col" style='margin-top:-8px'>
					<h4 style='font-family:Roboto;font-size:18px;color:#5ec0cb'>Total ride time</h4>
				   </div>
				   <div class="col-md-10 col-xs-10 col" style='background-color:#eaeaea;'>
						<div style='  background-color:#eaeaea;'></div>
				   </div>
				   <div class="col-md-12 col-xs-12 col"style='font-family:Roboto;font-size:32px;margin-left:5.8%;margin-top:8px' >
						<span style='font-family:Roboto;font-size:32px;margin-left:5.8%'>20</span><span style='font-family:Roboto;font-size:20px;margin-left:5.8%'>Mins</span>
				   </div>
				</div>
			</div>
			
			
			
			<div class="col-md-12 col-xs-12 bottomshadow rightside divmargintop_fare" style='min-height:240px;background-color:#ffffff;z-index:10;position: relative;'>
				 <div class="col-md-8 col-xs-12 col rightside" style='min-height:240px;'>
					 <div class="col-md-1 col-xs-1 col ">
					 
					 </div> 
					 <div class="col-md-5 col-xs-4 col " style='margin-top:2.5%;'>
						 <div >
						  <h4 style='font-family:Roboto;font-size:20px;color:#FF616161'><b>Fare</b></h4>
						</div>
					 </div>
					 <div class="col-md-6 col-xs-7 col" style='margin-top:2.5%;'>
						 <div>
						  <span style='font-size:14px;font-family:RupeeForadian;margin-top:18px;opacity:0.5'>&#8377; </span><span style='margin-left:8px;font-family:Roboto;font-size:26px;'><b>  200</b></span>
						</div>
					 </div>
				 
					<div class="col-md-11 col-xs-11" style='margin-top:2.5%;background-color:#eaeaea;'>
						<div style='  background-color:#eaeaea;'></div>
				   </div>
				    <div class="col-md-1 col-xs-1 col "style='margin-top:2.5%'></div>
				 
				  <div class="col-md-1 col-xs-1 col ">
					 
					 </div> 
					 <div class="col-md-5 col-xs-4 col "style='margin-top:2.5%'>
						 <div>
						 <h4 style='font-family:Roboto;font-size:20px;'><b>Waiting charge</b></h4>
						</div>
					 </div>
					 <div class="col-md-6 col-xs-7 col "style='margin-top:2.5%'>
						 <div>
						   <span style='font-size:14px;font-family:RupeeForadian;margin-top:18px;opacity:0.5'>&#8377; </span><span style='margin-left:8px;font-family:Roboto;font-size:26px;'><b>  20</b></span>
						</div>
					 </div>
				 
					<div class="col-md-11 col-xs-11" style='margin-top:2.5%;opacity: 0.5;background-color:#979797;'>
						<div style='  background-color:#eaeaea;'></div>
				   </div>
				    <div class="col-md-1 col-xs-1 col " style='margin-top:2.5%'></div>
				   
				
					 <div class="col-md-1 col-xs-1 col ">
					 
					 </div> 
					 <div class="col-md-5 col-xs-4 col " style='margin-top:2.5%'>
						 <div>
						 <h4 style='font-family:Roboto;font-size:28px;'><b>Total fare</b></h4>
						</div>
					 </div>
					 <div class="col-md-6 col-xs-7 col " style='margin-top:2.5%'>
						 <div>
						  <span style='font-size:18px;font-family:RupeeForadian;margin-top:18px;opacity:0.5'>&#8377; </span> <span style='margin-left:8px;font-family:Roboto;font-size:34px;'><b>  220</b></span>
						</div>
					 </div>
				 
					
				
				 </div>
				  
				  <div class="col-md-4 col-xs-12 col">
				  <div class='col-md-6 col-xs-12'>
				 
					<div class='carimage_name'>
						<img src='images/Bolt.png' width='60px' height='23px' />
						<div class='col-md-2 col-xs-2'style='text-align:center;'>
						<h4  style='font-size:14px;text-align:center;font-family:Roboto;'>Tata Indica</h4>
						</div>
					</div>
				   </div>
				   <div class='col-md-6 col-xs-12 name_and_number'>
				   <div style='margin-top:31px'>
						 <h4 style='font-family:Roboto;font-size:16px;'>Suresh</h4>
						 <h4 style='font-family:Roboto;font-size:16px;'><b>KA 05 JC 2233</b></h4>
						</div>
				     
				   </div>
				   <div class="col-md-4 col-xs-2 col "></div>
				   <div class="col-md-9 col-xs-9" style='margin-left:45px;margin-top:21px;background-color:#eaeaea;'>
						<div style='  background-color:#eaeaea;'></div>
				   </div> <div class="col-md-2 col-xs-2 col "></div>
				   
				   
				    <div class="col-md-12 col-xs-12 cashalign">
						<img src='images/Group 11.png' width='122px' height='37px' alt='cash'/>
				   </div>
				   
				  </div>
			</div>
			
			<div class="col-md-12 col-xs-12" style='min-height:50px;margin-top:1px;background-color:#5ec0cb;'>
			</div>
  </div>
</div>
</body>
</html>

我需要使用jquery将我的Html页面转换为PDF，我还需要保留我的CSS吗？

0 个答案: