js对网页进行局部打印

最新推荐文章于 2023-01-05 11:47:08 发布

Harper

最新推荐文章于 2023-01-05 11:47:08 发布

阅读量1.2k

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/zhifeiya/article/details/16357273

版权

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSDN广告是越来越多了，所有博客笔记不再更新，新网址 DotNet笔记

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>

Harper

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js对网页进行局部打印

JS代码：function preview(oper) { if (oper < 10) { bdhtml = window.document.body.innerHTML; //获取当前页的html代码 sprnstr = ""; //设置打印开始区域 eprnstr = ""; //设置打印结束区域 prnhtm
复制链接

扫一扫

专栏目录