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