Div printing doesn't work in chrome and doesn't accept style as 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 the div, but it doesn't work in chrome, also needs the style to be inernal on the same page and cannot use 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 when 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 + "'>")
}
});
source to share
Change, update
"use this bootstrap alone, same from your cdn .." Try http://jsfiddle.net/dLk2kwx9/7 . protocol https request for maxcdn
returned error 403 FORBIDDEN
. Try to substitute protocol http
for protocol https
in attributes link
and script
elements href
and src
accordingly. Applied styles should be reflected in the elements .container
, .btn
.
Note. Class .printable
not showing up html
in the OP? Not sure what specific styles should be applied to the printable
?, href
element link
that is being referenced when closing the question? Tried on 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()
});
})
})
source to share