Unable to create pdf using jquery

Question

The problem is that the jquery is printing the div but css is not working, also it prints an black and white card instead of coloured.... code for js is-

 `<script>
 function printData()
 {
 var css= '<link href="http://www.aadharindia.in/assets/aadhar/css/tri-card.css" rel="stylesheet">';
css= css + '<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">';
css= css + '<link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700" rel="stylesheet">';
css= css + '<link href="http://www.aadharindia.in/assets/aadhar/css/bootstrap-responsive.css" rel="stylesheet">';
css= css + '<link href="http://www.aadharindia.in/assets/aadhar/css/docs.css" rel="stylesheet">';
css= css + '<link href="http://www.aadharindia.in/assets/aadhar/css/style.css" rel="stylesheet">';
css= css + '<link href="http://www.aadharindia.in/assets/aadhar/css/default.css" rel="stylesheet">';

var divToPrint=document.getElementById("printTable");
newWin= window.open("");
newWin.document.head.innerHTML = css;
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}

$('button').on('click',function(){
printData();
 });

// ` and the code for html/php is-

       <div class="card-header">
            <div class="left-logo"><img src="http://www.aadharindia.in/assets/aadhar/img/ISSA 1.png"/></div>
            <div class="right-name"><div class="table"><div class="table-cell">
            <h4>Centre For Artisans Artists Peasants Professionals</h4>
           <p>Skills Network Tricard - Enrolments ID Classification</p> 
            </div></div></div>          
       </div>
       <div class="detail-xx">
            <div class="left-pic">
                <img src="<?php echo base_url().'uploads/law_individual/'.$tridata[0]['image'];?>"/>              
            </div>
            <div class="right-text-candidates">
            <ul>
            <li><p class="rightalign">Name : </p><p class="leftalign"><?php print_r(ucfirst($tridata[0]["firstName"])); ?></p></li>
            <li><p class="rightalign">Occupation : </p><p class="leftalign"><?php print_r($tridata[0]["occupation"]); ?></p></li>
            <li><p class="rightalign">Qualification : </p><p class="leftalign"><?php print_r($tridata[0]["degree"]); ?></p></li>
            <li><p class="rightalign">Industry : </p><p class="leftalign"><?php print_r($tridata[0]["industryGroup"]); ?></p></li>
           <!-- <li><p class="rightalign">Tri-Card No. : </p><p class="leftalign"><?php print_r($tridata[0]["applicationNo"]); ?></p></li>-->
           <!-- <li><p class="rightalign">QR No.. : </p><p class="leftalign">TRI-254345</p></li>      -->       
            </ul>

            <div class="bar-code">
            <img src="<?php echo base_url().'global/tmp/qr_codes/'.$tridata[0]['user_qrcode'];?>">

            </div>
         <!--   <div class="signature">
       <img src="http://www.aadharindia.in/assets/aadhar/img/signature.png"/>
       </div>-->
            </div> 

       </div>
       <div class="appno">
       <p style="text-align:center;font-size:180%;"><?php print_r($tridata[0]["occupationCategoryCode"]);print_r($tridata[0]["applicationNo"]);print_r($tridata[0]["occupationDivisionCode"]); ?></p>   
      </div>
      <div class="add table"><div class="table-cell"><p>C 514, Nirvana Courtyard, Nirvana Country, Sector 50, Gurugram, Haryana 122018</p></div></div>

    </div>
  </div>
  <button>Print me</button>

Any help will be appreciated thanks in advance............