<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Untitled Page</title>

    <script language="javascript" type="text/javascript">

        function printDiv(divID) {

            //Get the HTML of div

            var divElements = document.getElementById(divID).innerHTML;

            //Get the HTML of whole page

            var oldPage = document.body.innerHTML;

            //Reset the page's HTML with div's HTML only

            document.body.innerHTML =

              "<html><head><title></title></head><body>" +

              divElements + "</body>";

            //Print Page

            window.print();

            //Restore orignal HTML

            document.body.innerHTML = oldPage;

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="printablediv" style="width: 100%; background-color: Blue; height: 200px">

        请打印这里

    </div>

    <div id="donotprintdiv" style="width: 100%; background-color: Gray; height: 200px">

        这里是不打印的

    </div>

    <input type="button" value="Print 1st Div" onclick="javascript:printDiv('printablediv')" />

    </form>

</body>

</html>

　　

如果打印的网页设置引用了CSS样式文件，需要对样式文件进行导入，修改后的方法如下：

function printDiv(divID,title) {

    var links = document.getElementsByTagName("link");

    var styleContent = "";

    for (var i = 0, l = links.length; i < l; i++) {

        var src = links[i].href;

        styleContent += "<link href=\"" + src + "\" rel=\"stylesheet\" type=\"text/css\" />";

    }

    //Get the HTML of div

    var divElements = document.getElementById(divID).innerHTML;

    //Get the HTML of whole page

    var oldPage = document.body.innerHTML;

    var titleDiv = "<div style=\"text-align:center;width:100%;\"><h2>" + title + "</h2></div>";

    //Reset the page's HTML with div's HTML only

    document.body.innerHTML =

      "<html><head><title>报表打印</title>" + styleContent + "</head><body>" + titleDiv +

      divElements + "</body>";

    window.print();

    //Restore orignal HTML

    document.body.innerHTML = oldPage;

}

　　

JavaScript 打印Div内容的更多相关文章

  1. JS/javaScript 获取div内容

    jquery: 例如<div id="abc"><a>内容</a></div>$("#abc").html(); ...

  2. 使用JavaScript打印网页指定DIV区域

    JavaScript打印函数myPrint(obj): JavaScript打印页面指定div区域原理:使用window.open()在浏览器打开一个新的页面(window), 使用 window.d ...

  3. JS调用iframe方式实现Web区域打印页面内容

    1.程序说明 1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印: 2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容. 2.代码部分 1) ...

  4. 【JS】window.print打印指定内容

    有时候网页用到打印但是不想打印所有内容,就需要只打印指定内容,下面简单演示下如何打印指定内容 1.在需要打印的指定内容的头部前面加“<!--startprint-->”,在尾部后面加上“& ...

  5. jquery鼠标移动div内容上下左右滚动

    jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...

  6. JavaScript打印正倒直线

    做了一个作业,用JavaScript打印正倒直线,突然觉得自己还是逻辑有待加强训练啊 document.write("<h3>打印倒正金字塔直线</h3>" ...

  7. jQuery div内容间隔1秒动态向上滚动HTML、JS代码

    demo1: <!DOCTYPE html> <html> <head> <title>div内容间隔1秒动态滚动</title> < ...

  8. javascript dom追加内容的例子

    javascript dom追加内容的使用还是比较广泛的,在本文将为大家介绍下具体的使用方法. 例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  9. Ajax刷新DIV内容

    Ajax刷新DIV内容 实现了网页的异步数据处理,不用刷新整个页面 <标签 onmouseover="method"/ >method:这个参数是处理onmouseov ...

随机推荐

  1. html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

    开言: 以前lufy前辈写过叫“ HTML5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识.今天我也以零基础为 ...

  2. 推荐系统第4周--- 基于频繁模式的推荐系统和关联规则挖掘Apriori算法

    数据挖掘:关联规则挖掘

  3. Linux系统基础命令总结

    一.帮助命令(1)helpxxxx --helphelp xxxx(2)manman xxxx二.ls查看命令:列表显示目录内的文件及目录ls 参数-l 以列表的形式显示-d 显示目录本身属性-a显示 ...

  4. PKU 1932 XYZZY(Floyd+Bellman||Spfa+Floyd)

    题目大意:原题链接 给你一张图,初始你在房间1,初始生命值为100,进入每个房间会加上那个房间的生命(可能为负),问是否能到达房间n.(要求进入每个房间后生命值都大于0) 解题思路: 解法一:Floy ...

  5. 关于jQuery获得表单radio类型输入框的选中值

    var item=$("input[name='w1']checked").val(); 下面这句,问题解决(加上[type='radio']:): var item=$(&quo ...

  6. C# WinForm 父窗体 子窗体 传值

    C# WinForm 父窗体 子窗体 传值 本次示例效果如下:Form1为父窗体(包含textBox1.button1)Form2为子窗体(包含textBox2.button2) 父窗体给子窗体传值= ...

  7. zookeeper 监听事件 NodeCacheListener

    zookeeper 监听事件 NodeCacheListener NodeCacheListener一次注册,每次监听,但是监听不到操作类型,不知道是增加?删除?还是修改? 1.测试类: packag ...

  8. MySQL中exists与in的使用

    exists对外表用loop逐条查询,每次查询都会查看exists的条件语句,当 exists里的条件语句能够返回记录行时(无论记录行是的多少,只要能返回),条件就为真,返回当前loop到的这条记录, ...

  9. Http:UTF-8与GB2312之间的关系

    UTF-8里包括GB2312.UTF-8是国际通用的标准(包括世界所有的语言),而GB2312(只是简体中文)只适合做中文的网站.假设你想做个中文网页,但是还可以翻成英文的话,就得用UTF-8.如果用 ...

  10. java之继承中的构造方法

    继承中的构造方法  1.子类的构造过程中必须调用其基类的构造方法. 2.子类可以在自己的构造方法中使用super(argument_list)调用基类的构造方法. 2.1.使用this(argumen ...