<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. python学习笔记(十一）redis的介绍及安装

    一.redis简介 1.redis是一个开源的.使用C语言编写的.支持网络交互的.可基于内存也可持久化的Key-Value数据库.       2.redis的官网地址,非常好记,是redis.io. ...

  2. std::decay

    参考资料 • cplusplus.com:http://www.cplusplus.com/reference/type_traits/decay/ • cppreference.com:http:/ ...

  3. 跨域问题-nginx代理

    有时候我们跨域是借助了浏览器对 Access-Control-Allow-Origin 的支持.但有些浏览器是不支持的,所以这并非是最佳方案现在我们来利用nginx 通过反向代理 满足浏览器的同源策略 ...

  4. MySQL 温故知心(三)

    MySQL锁概述 相对其他数据库而言,MySQL的锁机制比较简单,其最显著的特点是不同的存储引擎支持不同的锁机制.比如,MyISAM和MEMORY存储引擎采用的是表级锁(table-level loc ...

  5. SpringSource Tool Suite (STS)无法启动问题

    修改STS.ini,指定一个JRE路径: -vmD:\Program\Java\jdk1.7.0_79\bin\javaw.exe-startupplugins/org.eclipse.equinox ...

  6. js小工具---本地图片转换为base64编码数据

    今天用jmeter对图片对比进行性能测试,post请求为json请求,图片为Base64编码后的图片数据.所以需要将一张本地图片生成base64编码,找到一个js小工具,记录在这儿便于以后复用. 效果 ...

  7. linux命令——chmod/chown

    改变文件所有权chown 例如 sudo chown username myfile 1 myfile文件的所有权变为username. chown -R username /files/work 1 ...

  8. 使用svn的过程中check out的文件路径中的文件图标全都加上了“蓝色问号”的解决方案

    (1)你在对同一层目录下创建一个记事本文件,然后把下面这句话复制进去 for /r . %%a in (.) do @if exist "%%a\.svn" rd /s /q &q ...

  9. 在python3下使用OpenCV做离散余弦变换DCT及其反变换IDCT

    对图像处理经常用到DCT, Python下有很多带有DCT算法包, 这里使用OpenCV的DCT做变换, 并简单置0部分数据, 再查看反变换图像的效果. import numpy as np impo ...

  10. Django学习笔记之ORM字段和字段参数

    Object Relational Mapping(ORM) 一.ORM介绍 1. ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象 ...