分頁打印，只打印指定內容
阿新 • • 發佈：2019-03-10
mar 實現 javascrip class always 分頁 lang gin 內容
知識點：用CSS控制分頁
在調用window.print()時，可以實現打印效果，但內容太多時要進行分頁打印。
在樣式中有規定幾個打印的樣式
page-break-before和page-break-after CSS屬性並不會修改網頁在屏幕上的顯示，這兩個屬性是用來控制文件的打印方式。
每個打印屬性都可以設定4種設定值：auto、always、left和right。其中Auto是默認值，示例中使用的是always。
page-break-before若設定成always，則是在遇到特定的組件時，打印機會重新開始一個新的打印頁。
page-break-after屬性會將分頁符號加在指定組件後，而非之前。
html代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>分頁測試</title>
<style type="text/css">
@page{margin:0;}/*此行表示不打印頁眉頁腳，也不打印頁碼*/
.A4{page-break-before: always;}/*遇到這個樣式則打印分頁，不影響網頁顯示*/
</style>
<script language="javascript" src="test.js"></script>
</head>
<body>
<input type="button" value="打印" onclick="myPrint()" style="float:right;"></input>
<!--startprint--> <!--從這裏開始打印-->
<div>第一頁</div> <!--第一頁不用設置分頁符-->
<div class="A4">第二頁</div> <!--需要分頁的地方引入CSS樣式-->
<!--endprint--> <!--到這裏結束打印-->
</body>
</html>
JS代碼：
function myPrint(str) {
bdhtml=window.document.body.innerHTML;//獲取當前頁的html代碼
var sprnstr="<!--startprint-->"
var eprnstr="<!--endprint-->"
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+17); //從開始代碼向後取html
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//從結束代碼向前取html
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;
}
分頁打印，只打印指定內容