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