Question

问题是jquery正在打印div但css无法正常工作，并且它打印的是黑白卡片而不是彩色卡片。 js的代码是-

 `<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();
 });

//` 而html / php的代码是-

       <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>

任何帮助将不胜感激............

Answer 1

我找到了一个解决方案，我只是在引用我的外部样式表时使用属性媒体，然后将css隐含在生成的pdf中。示例-

<link href="http://www.aadharindia.in/assets/aadhar/css/tri-card.css" rel="stylesheet" media="print">

无法使用jQuery创建PDF

1 个答案: