<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. Oracle 常见问题汇总

    1.Listener refused the connection with the following error 安装之后如果遇到如下问题状态: 失败 -测试失败: Listener refuse ...

  2. Python：6种标准数据类型

    原文地址https://www.cnblogs.com/qin1991/p/5910145.html #!/usr/bin/python3 #python的基本语法和数据类型 #python3中 一行 ...

  3. Java 面试总结 面试常问的关键字总结

    文章出处http://www.cnblogs.com/IUbanana/p/7116520.html 关键字: final finalize finally throws和throw static关键 ...

  4. hdu4057 Rescue the Rabbit

    地址:http://acm.hdu.edu.cn/showproblem.php?pid=4057 题目: Rescue the Rabbit Time Limit: 20000/10000 MS ( ...

  5. 一道仅有7人通过的超5星微软比赛题目-------解题思路&优秀代码分享，邀你来“找茬儿”

    6月23日英雄会平台发布了一道难度为超5星的微软比赛题目,截止活动结束共有300多名编程爱好者参与线上答题,而最终通过者仅有7人,通过率仅为2%.为什么成绩如此出人意料?是因为题目的英文描述难以理解? ...

  6. 论文笔记：IRGAN——A Minimax Game for Unifying Generative and Discriminative Information

    2017 SIGIR 简单介绍 IRGAN将GAN用在信息检索(Information Retrieval)领域,通过GAN的思想将生成检索模型和判别检索模型统一起来,对于生成器采用了基于策略梯度的强 ...

  7. Linux查找含有某字符串的文本文件

    转自:http://www.cnblogs.com/wangkongming/p/4476933.html 如果你想在当前目录下 查找"hello,world!"字符串,可以这样 ...

  8. 此博客可能不再更新，往后博文将发布在 GitHub 中

    在 GitHub 上, 可以建立不同的仓库,显示分类可以更明确: 有不同分支,可以打很多次草稿: 用 markdown 语法来书写比较舒服(博客园也可以设置): 最主要的是 GitHub 装逼呀!!! ...

  9. Maven错误recv failed

    问题:     从SVN上检出了一个Maven项目,在执行clean命令时,出现如下错误: java.net.SocketException:Software caused connection ab ...

  10. swift学习笔记 - 判断当前运行的系统和平台

    最近代码需要判断代码运行的系统与平台,下面总结了一下swift下一些可以用来判断的属性: // 代码运行在32位的 Windows public var TARGET_OS_MAC: Int32 { ...