下面的代码包含我的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'>₹ </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'>₹ </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'>₹ </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>