打印格在Chrome中工作，不採取風格爲紐帶

我用這 http://www.bennadel.com/blog/1591-ask-ben-print-part-of-a-web-page-with-jquery.htm 打印格在Chrome中工作，不採取風格爲紐帶

使用這個jQuery打印一個div，但它不是在鉻工作，也需要它的風格是inernal在同一頁面中，不能使用外部CSS。

<html> 
<head> 
// code 
     <link rel="stylesheet" rel="stylesheet" media="screen" href="style.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootssstrap-theme.min.css"> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script src="jquery.print.js.js"></script> 

     <script> 
     $(document).ready(function(){ 
      // Hook up the print link. 
      $("#print_div").click(function(){ 
       alert("asd"); 
       // Print the DIV. 
        $(".printable").print(); 
        // Cancel click event. 
        return(false); 
       }); 
      }); 

     </script> 
     <head> 
     <body> 

// code 
<div class="container text-center"> 
    <a href="#" class="btn btn-primary btn-lg print" id="print_div" >Print</a> 
</div> 
    <div class="printable"> 
     // section that need to be printed 
     // images, css form 
     // code 
</div> 
<body> 
    </html>

什麼更好的建議任何方式，我們可以整合這 https://github.com/jasonday/printThis

if (opt.importCSS) $("link[rel=stylesheet]").each(function() { 
       var href = $(this).attr("href"); 
       if (href) { 
        var media = $(this).attr("media") || "all"; 
        $doc.find("head").append("<link type='text/css' rel='stylesheet' href='" + href + "' media='" + media + "'>") 
       } 
      });

來源

2014-10-29 atjoshi

如果可能，可以描述_「需要樣式在同一頁面中，並且不能使用導入的CSS。」_？鏈接元素的'href'的url是什麼？ ''.printable''div'應用哪個特定'style'？請注意，'.printable'類不會出現在OP的'html'內？ – guest271314 2014-10-29 16:19:23

編輯，更新

「使用該引導之一，它同樣來自其CDN。」嘗試http://jsfiddle.net/dLk2kwx9/7。 https協議請求maxcdn返回403 FORBIDDEN錯誤。請嘗試分別使用http協議替換https協議link和script元素href和src屬性。應用風格應反映在.container,.btn元素。

注意，.printable類不是OP內html出現？不確定要在printable上應用哪些特定樣式？，href of link元素在結束問題時引用？在鉻37

試圖嘗試

HTML

<div class="container text-center"> 
    <a href="#" class="btn btn-primary btn-lg print" id="print_div">Print</a> 
</div> 
<!-- added `printable` class to `div` to be be printed --> 
<div class="printable"> 
     stuff to print 
</div>

CSS

/* `printable` styles to be applied before print, removed after print */ 
.printstyle {  
    font-size : 36px; 
}

$(function() { 
    $(".print").on("click", function(e) { 
     e.preventDefault(); 
     $("body *:not(.printable)").hide(function() { 
      $(".printable").addClass("printstyle"); 
      // $("head").append("<link>", { 
      // "href":"url" 
      // "rel":"stylesheet" 
      // }); 
      window.print() 
     }).promise().done(function(el) { 
      $(".printable").removeClass("printstyle"); 
      el.show() 
     }); 
    }) 
})

的jsfiddle http://jsfiddle.net/guest271314/dLk2kwx9/

來源

2014-10-29 16:48:51 guest271314

它阻止頁面上的其他jquery事件，並沒有採取外部CSS仍然。 – atjoshi 2014-10-30 03:34:54

試圖做同樣的，因爲我使用這個http://www.bennadel.com/blog/1591-ask-ben-print-part-of-a-web-page-with-jquery.htm，但它不工作對於外部CSS和鉻.. – atjoshi 2014-10-30 03:49:28

如果可能，可以發佈外部CSS網址？，外部的CSS文本？ – guest271314 2014-10-30 06:47:27

打印格在Chrome中工作，不採取風格爲紐帶

回答

相關問題