最近有朋友問js 如何打印預覽,今天就來講解一下,首先了解一下打印原理,其實局部打印頁面很簡單。就是把你需要打印的部分做一個起始標記,至於標記如何寫,隨便你寫什麼。我這裡就寫 <!--startprint--> 需要打印的內容
<!--endprint-->. 因為標記是不需要讓用戶看見的所以加了注釋!具體實現代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>打印預覽簡單實現</title>
</head>
<body>
<div>
這是body 裡的內容不需要打印,具體的頁面設計根據自己的要求自行設計。如果需要一個頁面多個tag,可以動態生成tag
</div>
<!--startprint-->
<div>
這是我需要打印的內容
</div>
<!--endprint-->
<script type="text/javascript">
function preview()
{
var bdhtml=window.document.body.innerHTML;//獲取當前頁的html代碼
var startStr="<!--startprint-->";//設置打印開始區域
var endStr="<!--endprint-->";//設置打印結束區域
var printHtml=bdhtml.substring(bdhtml.indexOf(startStr)+startStr.length,bdhtml.indexOf(endStr));//從標記裡獲取需要打印的頁面
window.document.body.innerHTML=printHtml;//需要打印的頁面
window.print();
window.document.body.innerHTML=bdhtml;//還原界面
}
preview();
</script>
</body>
</html>