分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

打印网页中某一段内容

发布时间:2023-09-06 01:21责任编辑:赖小花关键词:暂无标签

很久之前,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

 
演示:

打印网页中某一段内容

原文地址:http://www.cnblogs.com/insus/p/7765456.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved