<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. mysql 下的命令

    1.查看mysql日志vim /var/log/mysqld.log

  2. Linux系统常用命令汇总

    命令格式:命令 -选项 参数,例如:ls -la /usr:当有多个选项时,可以写在一起.ifconfig:查看当前机器的IP信息service network restart:重启网络服务servi ...

  3. 转载SQL_trace 和10046使用

    SQL_TRACE是Oracle提供的用于进行SQL跟踪的手段,是强有力的辅助诊断工具.在日常的数据库问题诊断和解决中,SQL_TRACE是非常常用的方法.本文就SQL_TRACE的使用作简单探讨,并 ...

  4. 百度NLP一面

    C++ :     1.拷贝构造函数和重载=符分别在什么情况下被调用,实现有什么区别 2.虚函数的目的,虚函数和模板类的区别,如何找到虚函数 常规算法: 1. 如何输出一个集合的所有真子集,递归和非递 ...

  5. Linux系统——本地定制化yum仓库部署

    1)开启yum仓库配置文件 /etc/yum.conf的keepcache功能 (开启一个新的虚拟机) 将keepcache=0改为1,修改配置文件后重新清空缓存(1默认下载的安装包不删除,才可以实现 ...

  6. SVN无法Cleanup

    错误如下: 原因:svn提交遇到恶心的问题,可能是因为上次cleanup中断后,进入死循环了 解决方法:清空svn的队列 1.下载Sqlite3.exe 2.找到你项目的.svn文件,查看是否存在wc ...

  7. logstash安装

    1.下载并安装公共签名密钥 rpm --import https://artifacts.elastic.co/GPG-KEY-elasticsearch 2.创建镜像源文件:/etc/yum.rep ...

  8. 235. Lowest Common Ancestor of a Binary Search Tree(LCA最低公共祖先)

      Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the ...

  9. Jmeter中解决中文乱码问题

    在使用JMeter过程中,执行结果响应断言总是提示失败,但是使用英文字母可以成功,表示逻辑和其它地方没有问题,问题可能出在编码上,细看了响应数据和日志,其中中文参数被编码成了类似URL编码格式,如下图 ...

  10. MyEclipse6.5注册

    貌似现在用MyEclipse6.5的人已经不多了,网上的大部分也都已过期,怀旧的人如果想快速得到一个MyElicpse6.5的注册码 Subscriber: dw008 Subscription Co ...