DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js實現局部頁面打印預覽原理及示例代碼
js實現局部頁面打印預覽原理及示例代碼
編輯:關於JavaScript     

最近有朋友問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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved