欢迎光临一流素材网,免积分免费素材下载!
当前位置:首页 > 教程 > 网站开发

实现web网页指定区域打印的三种方法

所属栏目:网站开发更新时间:2020-04-17 来源:网络 原作者:不详 发布:deepdfhy浏览:0

免费开源可商用的PHP万能建站程序-DiYunCMS(帝云CMS)

通过本教程可以实现,将印web网页指定区域的内容,本教程将提供三种方法实现。

方法一:打印网页指定区域

HTML

<!--startprint-->
在需要打印的内容
<!--endprint-->

<input type="button" onClick="doPrint()" value="打印" /> 

// 页面上的内容大小调整可以css调整或容器包容 打印容器内的内容就可以了

JS

<script language=javascript>
function doPrint() { 
bdhtml=window.document.body.innerHTML; 
sprnstr="<!--startprint-->"; 
eprnstr="<!--endprint-->"; 
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); 
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); 
window.document.body.innerHTML=prnhtml; 
window.print(); 
window.document.body.innerHTML=bdhtml;
}
</script>


方法二:指定打印区域

把要打印的内容放入一个span或div,然后通过一个函数打印。

代码如下:

<span id="div1">这里是要打印的内容</span& gt;
<p>所有内容</p>
<div id="div2">div2的内容</div& gt;
<a href="javascrīpt:printme()" target="_self">打印</a>
<script language="javascript">
function printme(){
 document.body.innerHTML=document.getElementById('div1').innerHTML+'<br/>'+document.getElementById('div2').innerHTML;
 window.print();
}
</script>


方法三:使用CSS

定义一 个.noprint的class,将不打印的内容放入这个class内。
代码如下:

<style media="print" type="text/css"> 
.noprint{visibility:hidden} 
</style>
这 里是要打印的内容。
<p class="noprint">这里是不打印的内容。</p>
<a href="javascrīpt:window.print()" target="_self"& gt;打印</a>


标签: 打印 打印网页
收藏 0 有帮助 0 没帮助 0 打赏 0
给个评价吧
百度云加速250x250