web页面实现指定区域打印功能

时间：2019-08-02 13:50:28 阅读：53 评论：0 收藏：0 [点我收藏+]

第一种方法：使用CSS，定义一个.noprint的class，将不打印的内容放入这个class内。

详细如下：

<style media=print type="text/css">
.noprint{visibility:hidden}
</style>

要打印的内容。哈哈！

<p class="noprint">将不打印的代码放在这里。</p>

<p >打印的代码放在这里。</p>

<button class="noprint" type="button" onclick="window.print()">print button</button>

第二种方法：指定打印区域

把要打印的内容放入一个 span中，然后通过一个函数打印。

<div>

所有内容

<span id=‘div1‘>把要打印的内容放这里</span>

</div>

function printme()

{

let oldBody = document.body.innerHTML // 保存

document.body.innerHTML=document.getElementById(‘div1‘).innerHTML;

window.print();

document.body.innerHTML = oldBody // 恢复

}

</script>

如果要打印的只是整个页面中的一小部分，就最好采用第二种方法。

第三种方法：如果要打印的页面排版和原web页面相差很大，采用此种方法。

点打印按钮弹出新窗口，把需要打印的内容显示到新窗口中，在新窗口中调用window.print()方法，然后自动关闭新窗口。

----------------------------------------------------------------------------------

JS 代码

function preview(oper){

if (oper < 10){

bdhtml=window.document.body.innerHTML;//获取当前页的html代码

sprnstr="";//设置打印开始区域

eprnstr="";//设置打印结束区域

prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html

prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html

window.document.body.innerHTML=prnhtml;

window.print();

window.document.body.innerHTML=bdhtml;

} else {

window.print();

}

</script>

html 代码

<body>

<div >

<span>不打印内容写在此处</span>

<span>打印1信息内容写在此处、、、 </span>

<span>打印2信息内容写在此处、、、</span>

</div>

<button class="noprint" type="button" onclick="preview(1)">print</button>

</body>

web页面实现指定区域打印功能

原文：https://www.cnblogs.com/changfeng1800/p/11287741.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)