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)記是不需要讓用戶(hù)看見(jiàn)的所以加了注釋?zhuān)【唧w實(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)文章
動(dòng)態(tài)控制Table的js代碼...2007-03-03
JSDoc 是一種 JavaScript 文檔注釋規(guī)范,它允許開(kāi)發(fā)者為 JavaScript 代碼添加注釋,下面就跟隨小編一起來(lái)學(xué)習(xí)一下它的具體使用吧2024-02-02
javascript和jquery實(shí)現(xiàn)用戶(hù)登錄驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了javascript和jquery分別實(shí)現(xiàn)用戶(hù)登錄驗(yàn)證的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
javascript中方便增刪改cookie的一個(gè)類(lèi)
把jquery.cookie.js改了一下，改成了純javascript版本，以備我以后項(xiàng)目只需，增加了一個(gè)得到頁(yè)面全部cookie鍵值的功能2012-10-10
JavaScript實(shí)現(xiàn)表單注冊(cè)、表單驗(yàn)證、運(yùn)算符功能
在本篇文章里我們給大家整理了關(guān)于JavaScript中表單注冊(cè)、表單驗(yàn)證、運(yùn)算符的代碼示例，有興趣的朋友們可以測(cè)試學(xué)習(xí)下。2018-10-10
今天小編就為大家分享一篇Layui給switch添加響應(yīng)事件的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
執(zhí)行上下文是JavaScript中非常重要的概念，它決定了代碼的執(zhí)行順序和作用域鏈等重要信息，下面我們就來(lái)深入探討JavaScript執(zhí)行上下文的概念和工作原理吧2023-07-07
es6數(shù)組includes()用法實(shí)例分析
這篇文章主要介紹了es6數(shù)組includes()用法,結(jié)合實(shí)例形式分析了es6數(shù)組includes()針對(duì)給定值判斷的相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-04-04
JS實(shí)現(xiàn)秒殺倒計(jì)時(shí)特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)秒殺倒計(jì)時(shí)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
今天小編就為大家分享一篇layer彈出層取消遮罩的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09