您的位置：首页 > Web前端 > JavaScript

js对网页进行局部打印

2013-11-16 14:56 183 查看

JS代码：

function preview(oper) {
if (oper < 10) {
bdhtml = window.document.body.innerHTML; //获取当前页的html代码
sprnstr = "<!--startprint" + oper + "-->"; //设置打印开始区域
eprnstr = "<!--endprint" + oper + "-->"; //设置打印结束区域
prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html

prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //从结束代码向前取html
window.document.body.innerHTML = "<body>" + prnhtml + "</body>";
window.print();
window.document.body.innerHTML = bdhtml;
}
else {                                              //打印全局
window.print();
}
}

我们使用的方式是：

html页面中，需要打印的位置加入，结束位置加入 数字1说明，网页可以指定多个打印区域（如：）。

然后调用指定以上js函数就可以：preview（oper），参数代表打印哪个区域，如果参数大于10，则打印整个网页

如下示例（注：我把上面那段js放到print.js文件里面了，所以需要引用）

<%@ Page Title="" Language="C#" MasterPageFile="~/web/_MuBan.master" AutoEventWireup="true" CodeFile="NewsDetail.aspx.cs" Inherits="web_NewsDetail" %>

<%@ Register src="../userControl/left_menu.ascx" tagname="left_menu" tagprefix="uc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="css/others.css" rel="stylesheet" type="text/css" />
<script src="Print.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function () {
$("#but_print").click(function () {
preview(1);
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="n_news_nr">
<div class="weizhi">当前位置：<a href="#">首页</a>><a href="#">新闻中心</a></div>
<div class="clear" style="height:10px;"></div>
<uc1:left_menu ID="left_menu1" runat="server" />
<div class="n_news_r">
<div class="n_news_r1">
<div class="n_news_r1_top"><b>新闻中心</b></div>
<!--startprint1-->
<div style="margin:0 auto; text-align:center">
<br/>
<b><asp:Literal ID="Literal_title" runat="server"></asp:Literal></b>
</div>
<div class="n_news_show_nr">
<asp:Literal ID="Literal_content" runat="server"></asp:Literal>
</div>
<!--endprint1-->
<input id="but_print" type="button" value="button" />
</div>
</div>
<div class="clear"></div>
</div>
</asp:Content>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航