`
天边一朵雲
  • 浏览: 36135 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

js打印指定DOM元素内的内容

 
阅读更多

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

分享到:
评论

相关推荐

    非常好用的Html指定区域打印js代码.rar

    它允许开发者选择要打印的DOM元素,并将这些元素的内容转化为适合打印的格式。使用这个插件,我们可以避免打印不必要的页面元素,只打印用户关心的部分。 以下是如何使用`jquery.PrintArea.js`的基本步骤: 1. ...

    js指定打印页面部分内容代码

    ()"&gt;打印指定内容 ``` 5. **HTML结构和CSS布局**: 为了有效地选择和打印网页部分,需要合理地组织HTML结构,确保需要打印的内容在独立的区块中。同时,使用适当的CSS布局(如Flexbox或Grid)可以使内容更容易定位...

    JavaScript获取HTML DOM节点元素的方法的总结

    在实际应用中,开发者通常会结合这些方法来定位和操作特定的DOM元素。例如,先通过`getElementById`找到一个父节点,然后使用`getElementsByTagName`或`children`来筛选出特定类型的子元素,最后利用`...

    好用的JS打印指定区域

    jQuery,作为一个广泛使用的JavaScript库,提供了简洁的API,使得开发者可以更加便捷地操作DOM元素,包括对页面区域的选取和操作。下面我们将深入探讨这一主题。 1. **jQuery简介** jQuery是由John Resig创建的一...

    网页打印控件JS版

    2. 在JavaScript中调用JsPrint提供的方法,指定要打印的DOM元素。例如,如果你有一个ID为"printArea"的DIV: ```javascript var printOptions = { elements: ['#printArea'], header: '打印标题', footer: '打印...

    javascript,js打印

    使用这个插件,可以指定要打印的DOM元素,比如某个ID或类名对应的元素。例如,`$("#myElement").printArea()`会打印ID为`myElement`的元素。 5. **jQuery库的使用**: `jquery-1.4.2.min.js`是jQuery的一个旧版本...

    js调用iframe实现打印页面内容的方法

    JavaScript(简称JS)提供了多种方式来实现网页内容的打印,包括打印整个页面或页面上的特定区域。本知识点主要介绍如何使用JS调用iframe元素来实现页面内容的打印功能。 ### 知识点一:使用iframe实现区域打印 ...

    JavaScript程序设计-操作DOM元素的节点及关系.pdf

    DOM元素的节点及关系是JavaScript编程中至关重要的概念,因为它们提供了对页面内容进行查找、修改和操作的基础。 1. 节点类型与属性 `element.nodeType` 属性返回一个整数值,指示节点的类型。常见的类型有: - 1...

    打印指定区域 JavaScript jsp html

    1. **选择需要打印的内容**:通过JavaScript获取需要打印的DOM元素。 ```javascript var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2'); ``` 2. **构造新的HTML内容**...

    js指定打印页面部分内容代码.zip

    标题“js指定打印页面部分内容代码.zip”涉及到的是JavaScript(js)技术在网页打印功能上的应用。JavaScript是一种广泛用于客户端Web开发的脚本语言,它可以与HTML和CSS紧密结合,实现动态网页交互。在这个压缩包中...

    JQUERY 实现条码生成和指定打印内容(预览效果)

    接下来,为了实现打印指定区域,我们可以利用jQuery来操作DOM,选取需要打印的div或其他元素,并结合window.print()函数来触发浏览器的打印预览。例如,如果要打印id为"printArea"的div: ```javascript $("#print...

    asp.net 打印 指定div的内容,并清空清空页眉页角

    总结起来,实现ASP.NET中打印指定div内容并清除页眉页脚的功能,主要是通过JavaScript操作DOM,创建隐藏iframe,将div内容复制到iframe,设置适当的CSS以隐藏默认的打印页眉和页脚,然后调用`window.print()`方法...

    JQuery打印指定区域

    本篇文章将详细探讨如何使用JQuery实现“打印指定区域”的功能。 首先,我们需要理解JQuery的核心理念:它简化了JavaScript的DOM操作,提供了丰富的选择器和方法,使得JavaScript编程更加简洁高效。在JQuery中处理...

    js实现打印

    这里,`#printArea`是我们的目标元素的选择器,`printThis`是一个插件方法,它扩展了jQuery的功能,使得我们可以轻松地打印指定的DOM元素。这个方法会创建一个临时的iframe,把选定的元素复制到其中,然后在这个...

    js print打印网页指定区域内容的简单实例

    &lt;title&gt;js print打印网页指定区域内容的简单实例 function myPrint(obj) { var newWindow = window.open("打印窗口", "_blank"); var docStr = obj.innerHTML; newWindow.document.write(docStr); newWindow...

    JS打印的几种实现方法

    使用`jquery.PrintArea.js`,开发者可以指定DOM元素的选择器,使得仅这些元素会被打印。 使用示例: ```javascript $("#printArea").printArea(); ``` 5. **jQuery与`jquery-1.4.2.min.js`**: `jquery-1.4.2...

    详解在Vue中通过自定义指令获取dom元素

    自定义指令允许开发者在DOM元素的生命周期内注入特定的行为。它们有一系列的钩子函数,如`bind`、`inserted`、`update`、`componentUpdated`和`unbind`,分别在不同阶段被调用。例如,`inserted`钩子在元素被插入到...

    js打印控件

    通过AJAX,我们可以从服务器获取实时数据,然后利用JavaScript动态地创建或修改DOM元素,使用户看到的内容与实际打印的内容保持一致。例如,一个在线购物网站可能需要根据用户的选择动态更新购物车的详情,然后进行...

    jquery 打印区域div元素内容.zip

    在这个主题中,我们将关注jQuery的jqPrint插件,这是一个用于打印指定元素的工具。 首先,我们需要了解jQuery的基本用法。在`index.html`文件中,通常会包含一个`&lt;script&gt;`标签引入jQuery库,例如这里使用的`jquery...

Global site tag (gtag.js) - Google Analytics