继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

打印网页中某一段内容

大吉大利今晚学习
关注TA
已关注
手记 265
粉丝 36
获赞 142

很久之前,Insus.NET的写过一篇,打印Web网页的。
今次尝试使用jQuery来实现。

打印的网页如下,需要打印的内容,使用一个div标签包含起来。并给此div一个ID值,稍后在jQuery代码会选择到此div。
另外还有放置一个铵钮,让用户点一点此铵钮,就能调用打印对话框进行打印。

 

<div id="divPrintContents">        标题标题标题标题标题标题标题标题标题标题        <br />        <hr />        <br />        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 <br />        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容<br />        内容内容内容内容内容内容内容<br />        内容内容内容内容内容内容内容内容内容内容内容内容内容内容<br />        内容内容内容内    </div>    <br />    <input type="button" id="btnPrint" value="打印" />

Source Code


既然要使用jquery,那得在网页上引用jQuery类库:

<script src="~/Scripts/jquery-3.1.1.js"></script>


jQuery代码:

 

 $(function () {            $("#btnPrint").click(function () {                var frame1 = $('<iframe />');                frame1[0].name = "frame1";                frame1.css({ "position": "absolute", "top": "-1000000px" });                $("body").append(frame1);                var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow :                    frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;                frameDoc.document.open();                frameDoc.document.write('<html>');                frameDoc.document.write('<head>');                frameDoc.document.write('<title>分析报表</title>');                frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');                frameDoc.document.write('</head>');                frameDoc.document.write('<body>');                frameDoc.document.write($("#divPrintContents").html());                frameDoc.document.write('</body>');                frameDoc.document.write('</html>');                frameDoc.document.close();                setTimeout(function () {                    window.frames["frame1"].focus();                    window.frames["frame1"].print();                    frame1.remove();                }, 500);            });        });

Source Code

 
演示:

 

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP