在使用jquery.PrintArea.js打印局部网页样式的时候,发现样式打印不出来,在网上找了好多资料,整理一下分享给大家
一、先看看css的引用文件方式
1、直接在内部的元素中使用”style”属性来定义样式,比如:
2、在
元素中使用”style”元素来指定3、使用元素链接到外部的样式文件,比如:
这三种是比较常见的方式
二、第一种方式:
直接在内部的元素中使用”style”属性来定义样式,然后调用printArea()函数,可打印全屏,可打印局部,样式都是起作用的,代码如下:
index$("#btnPrint").click(function () {
$("#printArea").printArea();
});
$("#btnPrintFull").click(function () {
$("body").printArea();
});
第二种方式:
在
元素中使用”style”元素来指定,你会发现打印局部网页预览的时候,样式并不起作用,在网上找到得资料是,在但是你会发现,这样做之后,样式并不起效,不知道是我用错了还是什么,贴上代码
index.content{font-size:36px;color:#ff0000;}
$("#btnPrint").click(function () {
$("#printArea").printArea();
});
$("#btnPrintFull").click(function () {
$("body").printArea();
});
后来弄了好久,才摸索出了解决办法,直接贴上代码
index.content { font-size: 36px; color: #ff0000; }
$("#btnPrint").click(function () {
$("#printArea").printArea();
});
$("#btnPrintFull").click(function () {
$("body").printArea();
});
把你要打印那块区域的样式放到你要打印的那块区域里面,打印的时候样式就有效了,不需要加media="print"
第三种方式和第二种方式是一样的道理