window.print()打印网页局部内容

最新推荐文章于 2024-06-10 16:43:59 发布

叶易风云

最新推荐文章于 2024-06-10 16:43:59 发布

阅读量5.4k

点赞数

分类专栏： Java EE jQuery 文章标签： javascript jquery window.print 网页局部打印

64 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

今天客户让添加个打印证照功能，直接用window.print()打印的是整个页面，而用以下方法就可以只打印证明了

<!--window.print打印指定div
window.print可以打印网页，但有时候我们只希望打印特定控件或内容，怎么办呢？
首先我们可以把要打印的内容放在div中，然后用下面的代码进行打印。
-->
<html>
<head>
<script language="javascript">
function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var printData = document.getElementById("dvData").innerHTML; 获得 div 里的所有 html 数据
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+printData+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
<title>div print</title>
</head>
<body>
//HTML Page
//Other content you wouldn't like to print
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">
<div id="div_print">
<h1 style="Color:Red">The Div content which you want to print</h1>
</div>
//Other content you wouldn't like to print
//Other content you wouldn't like to print
</body>
</html>

同理：

用 JavaScript 实现页面数据的打印：主要是用到了一个 print() 函数，该函数将会打印整个 web 页面 body 内的所有 html 数据 ! 使用方法为 window.print(); 打印页面上局部的数据，则可以用

//把数据嵌套在一个 div 里，获得 div

var printData = document.getElementById("dvData").innerHTML; 获得 div 里的所有 html 数据

window.document.body.innerHTML = printData; //把 html 里的数据复制给 body 的 html 数据，相当于重置了整个页面的内容
window.print(); // 开始打印

关注

专栏目录