HTML页面实现打印功能

示例1:

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>局部打印案例</title>
 6 
 7     <script type="text/javascript">
 8         function doPrint() {
 9             //获取整个打印前页面，作用是打印后恢复。
10             bdhtml = window.document.body.innerHTML;
11             sprnstr = "<!--startprint-->"; //标记打印区域开始
12             eprnstr = "<!--endprint-->";//标记打印区域结束
13             //获取要打印的区域, 从标记开始处向下获取。
14             prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);//17表示光标右移17个单位
15             //删除结束标记后面的内容。
16             prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
17             //将页面显示要打印的内容。
18             window.document.body.innerHTML = prnhtml;
19             //打印整个页面
20             window.print(prnhtml);
21             //恢复打印前的页面
22             window.document.body.innerHTML = bdhtml;
23 
24         }
25     </script>
26 
27 
28 </head>
29 
30 <body>
31     <p>1不需要打印的地方</p>
32     <!--startprint-->
33     <!--注意要加上html里star和end的这两个标记-->
34     <h1>打印标题</h1>
35     <p>打印内容~~</p>
36     <!--endprint-->
37     <button type="button" onclick="doPrint()">打印</button>
38     <p>2不需要打印的地方</p>
39 </body>
40 
41 </html>
复制代码

 

示例2:

 

复制代码
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <span id="cc">
        这里有一头猪要打一下。
    </span>
    <div>
        <a id="ps" href="javascript:;">打印</a>
    </div>
</body>
<script type="text/javascript">
    var ps = document.getElementById('ps');

    function preview(id) {
        var sprnhtml = $('#' + id).html(); //获取区域内容
        var selfhtml = $('body').html(); //获取当前页的html, 用来恢复页面
        //设置整个页面为要打印的内容。
        $('body').html(sprnhtml);
        //打印预览整个页面。
        window.print();
        //恢复整个页面到打印前的内容。
        $('body').html(selfhtml);
    }

    ps.onclick = function () {
        preview('cc');
    }
</script>
</html>
复制代码

 

posted @   看不见的R  阅读(7840)  评论(1)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示