js實現(xiàn)局部頁面打印預(yù)覽原理及示例代碼
更新時間：2014年07月03日 09:28:21 投稿：whsnow
js 如何打印預(yù)覽，實局部打印頁面很簡單。就是把你需要打印的部分做一個起始標(biāo)記，下面有個示例大大家不妨參考下
最近有朋友問js 如何打印預(yù)覽，今天就來講解一下，首先了解一下打印原理，其實局部打印頁面很簡單。就是把你需要打印的部分做一個起始標(biāo)記，至于標(biāo)記如何寫，隨便你寫什么。我這里就寫 <!--startprint--> 需要打印的內(nèi)容
<!--endprint-->. 因為標(biāo)記是不需要讓用戶看見的所以加了注釋！具體實現(xiàn)代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>打印預(yù)覽簡單實現(xiàn)</title>
</head>
<body>
<div>
這是body 里的內(nèi)容不需要打印，具體的頁面設(shè)計根據(jù)自己的要求自行設(shè)計。如果需要一個頁面多個tag,可以動態(tài)生成tag
</div>
<!--startprint-->
<div>
這是我需要打印的內(nèi)容
</div>
<!--endprint-->
<script type="text/javascript">
function preview()
{
var bdhtml=window.document.body.innerHTML;//獲取當(dāng)前頁的html代碼
var startStr="<!--startprint-->";//設(shè)置打印開始區(qū)域
var endStr="<!--endprint-->";//設(shè)置打印結(jié)束區(qū)域
var printHtml=bdhtml.substring(bdhtml.indexOf(startStr)+startStr.length,bdhtml.indexOf(endStr));//從標(biāo)記里獲取需要打印的頁面
window.document.body.innerHTML=printHtml;//需要打印的頁面
window.print();
window.document.body.innerHTML=bdhtml;//還原界面
}
preview();
</script>
</body>
</html>
相關(guān)文章
網(wǎng)頁加載時頁面顯示進度條加載完成之后顯示網(wǎng)頁內(nèi)容
網(wǎng)頁加載時頁面顯示進度條（加載完成時顯示網(wǎng)頁內(nèi)容）,這種效果在瀏覽網(wǎng)頁很常見，本文也介紹一種實現(xiàn)方法，需要了解的朋友可以參考下2012-12-12
javascript設(shè)計模式之策略模式學(xué)習(xí)筆記
這篇文章主要介紹了javascript設(shè)計模式之策略模式學(xué)習(xí)筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
在網(wǎng)頁使用過程中，經(jīng)常會用到代碼的展示。代碼高亮可以直觀的了解代碼，本文主要介紹了highlight.js 代碼高亮插件的使用詳解，具有一定的參考價值，感興趣的可以了解一下2022-01-01
這篇文章介紹了js操作checkbox遇到的問題解決，有需要的朋友可以參考一下2013-06-06
JS在Chrome瀏覽器中showModalDialog函數(shù)返回值為undefined的解決方法
這篇文章主要介紹了JS在Chrome瀏覽器中showModalDialog函數(shù)返回值為undefined的解決方法,涉及javascript針對谷歌瀏覽器事件判定相關(guān)操作技巧,需要的朋友可以參考下2016-08-08
我們在echarts表中經(jīng)常會出現(xiàn)X軸的信息顯示不完全的情況,所以本文小編給大家介紹了echarts X軸顯示不全的處理方法,文中通過代碼示例給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-01-01
js中繼承的幾種用法總結(jié)(apply,call,prototype)
本篇文章主要介紹了js中繼承的幾種用法總結(jié)(apply,call,prototype) 需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
下面小編就為大家?guī)硪黄狫S驗證圖片格式和大小并預(yù)覽的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
三維模型數(shù)據(jù)格式種類多樣,常見的有DAE、OBJ、STL、3DS?MAX、CLM、IFC等數(shù)據(jù)格式,下面這篇文章主要給大家介紹了關(guān)于前端如何使用Cesium加載三維模型的相關(guān)資料,需要的朋友可以參考下2024-05-05
JS實現(xiàn)的網(wǎng)頁倒計時數(shù)字時鐘效果
這篇文章主要介紹了JS實現(xiàn)的網(wǎng)頁倒計時數(shù)字時鐘效果,是一款非常實用的javascript倒計時特效,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03