使用jquery.PrintArea.js打印局部网页样式的时候,发现样式打印不出来解决办法如下
一、看css的引用文件方式
1、直接在内部的元素中使用”style”属性来定义样式,比如:<div style=”width:800px;”></div>
2、在<head>元素中使用”style”元素来指定
3、使用<link>元素链接到外部的样式文件,比如:<link rel=”stylesheet” type=”text/css” href=”default.css”>
这三种是比较常见的方式
二、第一种方式:
直接在内部的元素中使用”style”属性来定义样式,然后调用printArea()函数,可打印全屏,可打印局部,样式都是起作用的,代码如下:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>index</title>
</head>
<body>
<div>
<div id="printArea">
<div style="font-size:18px;color:#ff0000;">......文本打印区域......</div>
<div style="font-size:24px;color:#ff0000;">......文本打印区域......</div>
<div style="font-size:36px;color:#ff0000;">......文本打印区域......</div>
</div>
<br>
<br>
<input id="btnPrint" type="button" value="打印文本区域" />
<input id="btnPrintFull" type="button" value="全屏打印" />
</div>
<script>
$("#btnPrint").click(function () {
$("#printArea").printArea();
});
$("#btnPrintFull").click(function () {
$("body").printArea();
});
</script>
</body>
第二种方式:
在<head>元素中使用”style”元素来指定,你会发现打印局部网页预览的时候,样式并不起作用,在网上找到得资料是,在<style type="text/css" media="print"
></style>
但是你会发现,这样做之后,样式并不起效,不知道是我用错了还是什么,贴上代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>index</title>
<style type="text/css" media="print">
.content{font-size:36px;color:#ff0000;}
</style>
</head>
<body>
<div>
<div id="printArea">
<div class="content">......文本打印区域......</div>
<div class="content">......文本打印区域......</div>
<div class="content">......文本打印区域......</div>
</div>
<br>
<br>
<input id="btnPrint" type="button" value="打印文本区域" />
<input id="btnPrintFull" type="button" value="全屏打印" />
</div>
<script>
$("#btnPrint").click(function () {
$("#printArea").printArea();
});
$("#btnPrintFull").click(function () {
$("body").printArea();
});
</script>
</body>
后来弄了好久,才摸索出了解决办法,直接贴上代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>index</title>
</head>
<body>
<div>
<div id="printArea">
<style type="text/css">
.content { font-size: 36px; color: #ff0000; }
</style>
<div class="content">......文本打印区域......</div>
<div class="content">......文本打印区域......</div>
<div class="content">......文本打印区域......</div>
</div>
<br>
<br>
<input id="btnPrint" type="button" value="打印文本区域" />
<input id="btnPrintFull" type="button" value="全屏打印" />
</div>
<script>
$("#btnPrint").click(function () {
$("#printArea").printArea();
});
$("#btnPrintFull").click(function () {
$("body").printArea();
});
</script>
</body>
把你要打印那块区域的样式放到你要打印的那块区域里面,打印的时候样式就有效了,不需要加media="print"
第三种方式和第二种方式是一样的道理
jquery.PrintArea.min.js
(function ($) {
var printAreaCount = 0;
$.fn.printArea = function () {
var ele = $(this);
var idPrefix = "printArea_";
removePrintArea(idPrefix + printAreaCount);
printAreaCount++;
var iframeId = idPrefix + printAreaCount;
var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';
iframe = document.createElement('IFRAME');
$(iframe).attr({
style: iframeStyle,
id: iframeId
});
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
$(document).find("link").filter(function () {
return $(this).attr("rel").toLowerCase() == "stylesheet";
}).each(
function () {
doc.write('<link type="text/css" rel="stylesheet" href="'
+ $(this).attr("href") + '" >');
});
doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html()
+ '</div>');
doc.close();
var frameWindow = iframe.contentWindow;
frameWindow.close();
frameWindow.focus();
frameWindow.print();
}
var removePrintArea = function (id) {
$("iframe#" + id).remove();
};
})(jQuery);