在使用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"
第三种方式和第二种方式是一样的道理