0

Below code contains my HTML Design I need to convert this page to pdf and Need to Retain CSS as it, why I need to convert this page because I need this page to print format, When It's given to print it is not taking CSS how to retain my CSS which include background color and margin also Please is there any other option that I can Try, Thanks.

 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>
Madhu Gr
  • 41
  • 5
  • You need to have a print CSS. Your CSS is a mess anyway – mplungjan May 07 '17 at 09:37
  • Have you tried using a library of some sort? There are several recommendations here: http://stackoverflow.com/questions/742271/generating-pdf-files-with-javascript – Jack Robson May 07 '17 at 09:39
  • Dear Sir, I tried not working for me and also for the same design I didn't use any media query then also not worked. when I press ctrl p CSS property are not working any of the pages. – Madhu Gr May 07 '17 at 09:45
  • Use this link: http://stackoverflow.com/questions/12108806/how-to-convert-total-html-page-to-pdf-using-javascript-or-jquery. Maybe it will help you. – Jose Marques May 07 '17 at 09:46
  • @JackRobson I Tried those libraries which easily can convert to pdf but CSS is not working for those libraries – Madhu Gr May 07 '17 at 09:54

0 Answers0