我正在用这个 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 + "'>")
}
});
最佳答案
编辑、更新
“使用那个 Bootstrap ，它与它的 cdn 相同。” 尝试 http://jsfiddle.net/dLk2kwx9/7 . maxcdn 的 https 协议(protocol)请求返回了 403 FORBIDDEN 错误。尝试在 link 和 script 元素 href 和 中用 属性，分别。应用的样式应反射(reflect)在 http 协议(protocol)替换 https 协议(protocol)code>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()
});
})
})
关于javascript - 打印 div 在 chrome 中不起作用并且没有将样式作为链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26634675/