1:js:
function printPartOfDocument() {
this.init.apply(this, arguments)
}
printPartOfDocument.prototype = {
init: function(o, part) {
this.o = this.getId(o);
this.part = this.getId(part);
this.frame = '';
this.printCss = '';
var _this = this;
this.addEvent(this.o, 'click',
function() {
_this.create()
});
},
create: function() {
var _this = this;
if (!this.frame) {
var oFrame = document.createElement('iframe');
oFrame.setAttribute('id', 'printIframe');
oFrame.style.position = 'absolute';
oFrame.style.left = '-9999px';
document.body.appendChild(oFrame);
}
if (!this.printCss) this.printCss = this.getPrintCss();
setTimeout(function() {
_this.frame = document.getElementById('printIframe'),
d = _this.frame.contentWindow.document,
h = d.getElementsByTagName('head')[0],
b = d.getElementsByTagName('body')[0];
for (var i = 0; i < _this.printCss.length; i++) {
h.appendChild(_this.printCss[i]);
}
b.innerHTML = '';
b.appendChild(_this.part.cloneNode(true));
_this.frame.contentWindow.print();
},
0);
},
getPrintCss: function() {
var styles = document.getElementsByTagName('head')[0].getElementsByTagName('link'),
printCss = [];
for (var i = 0; i < styles.length; i++) {
var attr = styles[i].getAttribute('media');
if (attr == 'all' || attr == 'print') printCss.push(styles[i].cloneNode(true));
}
return printCss;
},
getId: function(el) {
return typeof el == 'string' ? document.getElementById(el) : el
},
addEvent: function(o, type, fn) {
if (o.addEventListener) {
o.addEventListener(type, fn, false)
} else if (o.attachEvent) {
o.attachEvent('on' + type,
function() {
fn.call(o, window.event)
})
}
}
}
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="global.css" rel="stylesheet" type="text/css"/>
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
<link href="print2.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<a href="javascript:void(0)" title="print" id="print">print</a>
<div id="print_content">
<h1>只会打印这个div里的内容,下面的层的内容不会被打印 </h1>
<p>打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,</p>
</div>
<div>
<h1>这个层的内容不会被打印</h1>
<p>这里的内容不会被打印,这里的内容不会被打印,这里的内容不会被打印,这里的内容不会被打印,这里的内容不会被打印,</p>
</div>
<script type="text/javascript" src="printPartOfDocument.js"></script>
<script type="text/javascript">
new printPartOfDocument('print','print_content');
</script>
</body>
</html>
方法2:
js
function Printpart(idstr){//idstr 要打印内容中的id
var el = document.getElementById(idstr);
var iframe = document.createElement('IFRAME');
var doc = null;
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
doc.write('<div>' + el.innerHTML + '</div>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0){
document.body.removeChild(iframe);
}
}
来自:http://www.oschina.net/code/snippet_569983_11216
分享到:
相关推荐
它允许开发者选择要打印的DOM元素,并将这些元素的内容转化为适合打印的格式。使用这个插件,我们可以避免打印不必要的页面元素,只打印用户关心的部分。 以下是如何使用`jquery.PrintArea.js`的基本步骤: 1. ...
()">打印指定内容 ``` 5. **HTML结构和CSS布局**: 为了有效地选择和打印网页部分,需要合理地组织HTML结构,确保需要打印的内容在独立的区块中。同时,使用适当的CSS布局(如Flexbox或Grid)可以使内容更容易定位...
在实际应用中,开发者通常会结合这些方法来定位和操作特定的DOM元素。例如,先通过`getElementById`找到一个父节点,然后使用`getElementsByTagName`或`children`来筛选出特定类型的子元素,最后利用`...
jQuery,作为一个广泛使用的JavaScript库,提供了简洁的API,使得开发者可以更加便捷地操作DOM元素,包括对页面区域的选取和操作。下面我们将深入探讨这一主题。 1. **jQuery简介** jQuery是由John Resig创建的一...
2. 在JavaScript中调用JsPrint提供的方法,指定要打印的DOM元素。例如,如果你有一个ID为"printArea"的DIV: ```javascript var printOptions = { elements: ['#printArea'], header: '打印标题', footer: '打印...
使用这个插件,可以指定要打印的DOM元素,比如某个ID或类名对应的元素。例如,`$("#myElement").printArea()`会打印ID为`myElement`的元素。 5. **jQuery库的使用**: `jquery-1.4.2.min.js`是jQuery的一个旧版本...
JavaScript(简称JS)提供了多种方式来实现网页内容的打印,包括打印整个页面或页面上的特定区域。本知识点主要介绍如何使用JS调用iframe元素来实现页面内容的打印功能。 ### 知识点一:使用iframe实现区域打印 ...
DOM元素的节点及关系是JavaScript编程中至关重要的概念,因为它们提供了对页面内容进行查找、修改和操作的基础。 1. 节点类型与属性 `element.nodeType` 属性返回一个整数值,指示节点的类型。常见的类型有: - 1...
1. **选择需要打印的内容**:通过JavaScript获取需要打印的DOM元素。 ```javascript var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2'); ``` 2. **构造新的HTML内容**...
标题“js指定打印页面部分内容代码.zip”涉及到的是JavaScript(js)技术在网页打印功能上的应用。JavaScript是一种广泛用于客户端Web开发的脚本语言,它可以与HTML和CSS紧密结合,实现动态网页交互。在这个压缩包中...
接下来,为了实现打印指定区域,我们可以利用jQuery来操作DOM,选取需要打印的div或其他元素,并结合window.print()函数来触发浏览器的打印预览。例如,如果要打印id为"printArea"的div: ```javascript $("#print...
总结起来,实现ASP.NET中打印指定div内容并清除页眉页脚的功能,主要是通过JavaScript操作DOM,创建隐藏iframe,将div内容复制到iframe,设置适当的CSS以隐藏默认的打印页眉和页脚,然后调用`window.print()`方法...
本篇文章将详细探讨如何使用JQuery实现“打印指定区域”的功能。 首先,我们需要理解JQuery的核心理念:它简化了JavaScript的DOM操作,提供了丰富的选择器和方法,使得JavaScript编程更加简洁高效。在JQuery中处理...
这里,`#printArea`是我们的目标元素的选择器,`printThis`是一个插件方法,它扩展了jQuery的功能,使得我们可以轻松地打印指定的DOM元素。这个方法会创建一个临时的iframe,把选定的元素复制到其中,然后在这个...
<title>js print打印网页指定区域内容的简单实例 function myPrint(obj) { var newWindow = window.open("打印窗口", "_blank"); var docStr = obj.innerHTML; newWindow.document.write(docStr); newWindow...
使用`jquery.PrintArea.js`,开发者可以指定DOM元素的选择器,使得仅这些元素会被打印。 使用示例: ```javascript $("#printArea").printArea(); ``` 5. **jQuery与`jquery-1.4.2.min.js`**: `jquery-1.4.2...
自定义指令允许开发者在DOM元素的生命周期内注入特定的行为。它们有一系列的钩子函数,如`bind`、`inserted`、`update`、`componentUpdated`和`unbind`,分别在不同阶段被调用。例如,`inserted`钩子在元素被插入到...
通过AJAX,我们可以从服务器获取实时数据,然后利用JavaScript动态地创建或修改DOM元素,使用户看到的内容与实际打印的内容保持一致。例如,一个在线购物网站可能需要根据用户的选择动态更新购物车的详情,然后进行...
在这个主题中,我们将关注jQuery的jqPrint插件,这是一个用于打印指定元素的工具。 首先,我们需要了解jQuery的基本用法。在`index.html`文件中,通常会包含一个`<script>`标签引入jQuery库,例如这里使用的`jquery...