当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Print div is not working in chrome and not taking the style as the link

问题描述:

I am using this

http://www.bennadel.com/blog/1591-ask-ben-print-part-of-a-web-page-with-jquery.htm

Using this jquery to print a div, but its not working in chrome, also it need the style to be inernal in the same page and cannot use the external 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>

Any better suggestions any way where we can integrate this

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 + "'>")

}

});

网友答案:

Edit, Updated

"use that bootstrap one, its same from its cdn.. " Try http://jsfiddle.net/dLk2kwx9/7 . https protocol request for maxcdn returned 403 FORBIDDEN error . Try substituting http protocol for https protocol at link and script elements href and src attributes , respectively. Applied styles should be reflected at .container , .btn elements.


Note, .printable class not appear within html at OP ? Not certain about which specific styles to be applied at printable ? , href of link element referenced at closing of Question ? Tried at chrome 37

Try

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/

分享给朋友:
您可能感兴趣的文章:
随机阅读: