Question

我正在使用它 http://www.bennadel.com/blog/1591-ask-ben-print-part-of-a-web-page-with-jquery.htm

使用这个jquery来打印一个div，但是它不能用于chrome，它也需要在同一页面中使用该样式并且不能使用外部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 + "'>")
                }
            });

Answer 1

修改，更新

＆＃34;使用该引导程序，与其cdn相同...＆＃34; 试试http://jsfiddle.net/dLk2kwx9/7。 https协议请求maxcdn返回403 FORBIDDEN错误。尝试分别在http和https元素link和script属性上用href协议替换src协议。应用的样式应反映在.container，.btn元素上。

注意，.printable类不会出现在OP的html内？不确定在printable应用哪些特定样式？问题结束时引用的href元素link？试过chrome 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;
}

JS

$(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/

打印div不在chrome中工作，也没有将样式作为链接

1 个答案: