JavaScript 打印Div内容
<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内容的更多相关文章
- JS/javaScript 获取div内容
jquery: 例如<div id="abc"><a>内容</a></div>$("#abc").html(); ...
- 使用JavaScript打印网页指定DIV区域
JavaScript打印函数myPrint(obj): JavaScript打印页面指定div区域原理:使用window.open()在浏览器打开一个新的页面(window), 使用 window.d ...
- JS调用iframe方式实现Web区域打印页面内容
1.程序说明 1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印: 2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容. 2.代码部分 1) ...
- 【JS】window.print打印指定内容
有时候网页用到打印但是不想打印所有内容,就需要只打印指定内容,下面简单演示下如何打印指定内容 1.在需要打印的指定内容的头部前面加“<!--startprint-->”,在尾部后面加上“& ...
- jquery鼠标移动div内容上下左右滚动
jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...
- JavaScript打印正倒直线
做了一个作业,用JavaScript打印正倒直线,突然觉得自己还是逻辑有待加强训练啊 document.write("<h3>打印倒正金字塔直线</h3>" ...
- jQuery div内容间隔1秒动态向上滚动HTML、JS代码
demo1: <!DOCTYPE html> <html> <head> <title>div内容间隔1秒动态滚动</title> < ...
- javascript dom追加内容的例子
javascript dom追加内容的使用还是比较广泛的,在本文将为大家介绍下具体的使用方法. 例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- Ajax刷新DIV内容
Ajax刷新DIV内容 实现了网页的异步数据处理,不用刷新整个页面 <标签 onmouseover="method"/ >method:这个参数是处理onmouseov ...
随机推荐
- 20165324 2017-2018-2 《Java程序设计》课程总结
20165324 2017-2018-2 <Java程序设计>课程总结 每周作业链接汇总 预备作业1:20165324 我期望的师生关系 预备作业2:20165324 学习基础与C语言学习 ...
- 如何看MFC程序
一直以来 我都一个疑惑 如果看懂别人的MFC 程序. 今日忽然略有小悟. Q:MFC是啥? A:MFC是类库.. ************* Q :MFC 啥玩意类库? A;MFC 是封装API的类 ...
- usr/bin/ld: cannot find 错误解决方法和 /etc/ld.so.conf
我makefile出现这个错误: HelloWorldServer.c:(.text+0xaa): undefined reference to `zmq_send'collect2: error: ...
- 阿里云搭建go开发环境
开通了一个阿里云来玩,记录一下环境搭建的过程 运行环境 ECS Ubuntu 16.04 64位 过程 #切换到安装文件夹 cd /usr/local #下载go #由于墙的原因,直接下载官方的可能会 ...
- 无密码ssh操作步骤备忘
需求:A机器无密码登陆到B机器 1.A机器执行 ssh-keygen -t rsa ,在~/.ssh/下生成id_rsa 和 id_rsa.pub两个文件,其中id_rsa.pub是公匙 2. ...
- java字符串分割的小练习
最近看到一个网友的一个小问题,有关字符串分割的,思考了一下,后面给出代码:碰到一个java字符串判断结尾的问题,发现与c\c++以"\0"判断字符串结尾不同的是,java中字符串是 ...
- maven 介绍(一)
本文内容主要摘自:http://www.konghao.org/index 内部视频 http://www.ibm.com/developer ...
- FileOutputStream写出数据实现换行和追加写入
FileOutputStream fos = fos = new FileOutputStream(Utils.getData(bizCtx,"strcat(getenv(HWORKDIR) ...
- php中获得数组长度的方法
php中获得数组长度的方法 count统计数组里元素的个数: strlen是统计数组中元素的长度: 你如果想统计数组中所有元素的长度,那就用循环统计吧tqeb 代码: $a = array( ...
- Web开发相关笔记 #02#
[1] HTML 插入第三方. [2] [3] JavaScript 回调函数 & 模块化 --> 用变量封装数据.方法 --> 类比 Java 中的 package var fe ...