JS调用iframe方式实现Web区域打印页面内容

时间：2014-01-23 编辑：简简单单来源：一聚教程网

1、程序说明
1) 此程序可以实现选择页面中的区域进行打印，以iframe方式进行打印；
2) 与原生态的print() 区别在于，取消打印页面后可以完整保留当前访问页面的内容。

2、代码部分
1) JS 函数：

代码如下

复制代码

function do_print(id_str)//id-str 打印区域的id
{
      var el = document.getElementById(id_str);
      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;
      // 引入打印的专有CSS样式，www.111Cn.net根据实际修改
      doc.write("");
      doc.write('

' + el.innerHTML + '

');
      doc.close();
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      if (navigator.userAgent.indexOf("MSIE") > 0)
      {
           document.body.removeChild(iframe);
      }
}

2) HTML：

// 打印区域：

......

// 调用打印

CSS：

根据具体需要进行修改添加。

3. 测试

点击页面上的打印按钮，即可测试打印；

除了上面方法我们还可以通过jquery来实例，代码如下

代码如下

复制代码

.....文本打印部分.....

如果要实现区域打印我们可尝试下面方法

下面本文分享一种超简单的方法实现页面的打印功能，不仅可以打印整个页面，还可以打印页面某块区域

代码如下	复制代码
div print 被打印区域：www.111com.net 这块区域是打印不到的！

上一个： Javascript中日期格式化函数性能测试
下一个： window.open()详解及应用实例

推荐专题

最新下载

热门教程

JS调用iframe方式实现Web区域打印页面内容

被打印区域：www.111com.net

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程