使用jquery.PrintArea.js进行网页打印时，遇到预览样式不生效的困扰。通过分析CSS引用方式，包括内联样式、内部样式表和外部样式文件，总结了解决方案。在内联样式和内部样式表中，样式能够正常应用；而在外部样式文件中，需确保样式被正确引入。将打印区域样式放入该区域内部，以确保在打印时样式生效。
在使用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"
第三种方式和第二种方式是一样的道理
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
