js實現(xiàn)局部頁面打印預(yù)覽原理及示例代碼
更新時間：2014年07月03日 09:28:21 投稿：whsnow
js 如何打印預(yù)覽，實局部打印頁面很簡單。就是把你需要打印的部分做一個起始標記，下面有個示例大大家不妨參考下
最近有朋友問js 如何打印預(yù)覽，今天就來講解一下，首先了解一下打印原理，其實局部打印頁面很簡單。就是把你需要打印的部分做一個起始標記，至于標記如何寫，隨便你寫什么。我這里就寫 <!--startprint--> 需要打印的內(nèi)容
<!--endprint-->. 因為標記是不需要讓用戶看見的所以加了注釋！具體實現(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;//獲取當前頁的html代碼
var startStr="<!--startprint-->";//設(shè)置打印開始區(qū)域
var endStr="<!--endprint-->";//設(shè)置打印結(jié)束區(qū)域
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>
相關(guān)文章
動態(tài)控制Table的js代碼...2007-03-03
JSDoc 是一種 JavaScript 文檔注釋規(guī)范,它允許開發(fā)者為 JavaScript 代碼添加注釋,下面就跟隨小編一起來學(xué)習(xí)一下它的具體使用吧2024-02-02
javascript和jquery實現(xiàn)用戶登錄驗證
這篇文章主要為大家詳細介紹了javascript和jquery分別實現(xiàn)用戶登錄驗證的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
把jquery.cookie.js改了一下，改成了純javascript版本，以備我以后項目只需，增加了一個得到頁面全部cookie鍵值的功能2012-10-10
JavaScript實現(xiàn)表單注冊、表單驗證、運算符功能
在本篇文章里我們給大家整理了關(guān)于JavaScript中表單注冊、表單驗證、運算符的代碼示例，有興趣的朋友們可以測試學(xué)習(xí)下。2018-10-10
今天小編就為大家分享一篇Layui給switch添加響應(yīng)事件的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
執(zhí)行上下文是JavaScript中非常重要的概念，它決定了代碼的執(zhí)行順序和作用域鏈等重要信息，下面我們就來深入探討JavaScript執(zhí)行上下文的概念和工作原理吧2023-07-07
這篇文章主要介紹了es6數(shù)組includes()用法,結(jié)合實例形式分析了es6數(shù)組includes()針對給定值判斷的相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細介紹了JS實現(xiàn)秒殺倒計時特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
今天小編就為大家分享一篇layer彈出層取消遮罩的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09