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("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
      doc.write('<div>' + el.innerHTML + '</div>');
      doc.close();
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      if (navigator.userAgent.indexOf("MSIE") > 0)
      {
           document.body.removeChild(iframe);
      }
}

2) HTML：

// 打印区域：
<div id="print_box">
......
</div>
// 调用打印
<button onclick="javascript:do_print('print_box');">打印</button>

CSS：

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

3. 测试

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

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

 代码如下 复制代码

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.PrintArea.js"></script>
<script>
$(document).ready(function(){
  $("input#biuuu_button").click(function(){

$("div#myPrintArea").printArea();

});
});
 
</script>

<input id="biuuu_button" type="button" value="打印"></input>

<div id="myPrintArea">.....文本打印部分.....</div>

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

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

 代码如下 复制代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
function printdiv(printpage){
 var headstr="<html><head><title></title></head><body>";
 var footstr="</body>";
 var newstr=document.all.item(printpage).innerHTML;
 var oldstr=document.body.innerHTML;
 document.body.innerHTML=headstr+newstr+footstr;
 window.print();
 document.body.innerHTML=oldstr;
 return false;
}
</script>
<title>div print</title>
</head>
<body>
<input type="button" onClick="printdiv('div_print');" value=" 打印 ">
<div id="div_print">
<h1 style="Color:Red">被打印区域：www.111cn.net</h1>
</div>
这块区域是打印不到的！
</body>
</html>
 
你可能感兴趣的文章

JS调用iframe方式实现Web区域打印页面内容的更多相关文章

  1. Vue项目中将table组件导出Excel表格以及打印页面内容

    体验更优排版请移步原文:http://blog.kwin.wang/programming/vue-table-export-excel-and-print.html 页面中显示的table表格,经常 ...

  2. jquery、js调用iframe父窗口与子窗口元素的方法整理

    1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 ...

  3. 使用jqprint插件实现打印页面内容

    业务场景 客户需要在页面有一个打印按钮,点击之后可以打印Echarts图表的内容以及文字提示信息,经谷歌搜索发现,实现方法大概有三种之多,其他两种不太熟悉,而采用的这种打印方式是一个在jQuery的基 ...

  4. 关于js调用外部部署的web api

    没想到多年之后我还得继续写这些东西.... 瀑布汗~ 最近不得不开始研究用web api MVC的项目中,在js文件里,实现点击一个按钮调用外部发布好的api,再从api把值回传给js页面,跳转. 经 ...

  5. 打印页面内容，<input>不好使，用<textarea> 代替

    <textarea class="sld-textarea" onchange="changeTextareaValue(this)">123< ...

  6. WebView中JS调用Android Method 遇到的坑整理

    WebView是android中常用的一个组件,其作用是展示网页,并让网页和android app进行一些业务逻辑上的交互. 其坑无数,相信用过的都知道,一个一个来解决吧. 1.怎么互调: <! ...

  7. js对iframe内外（父子）页面进行操作

    dom对象推荐阅读 怎么对iframe进行操作,1.在iframe里面控制iframe外面的js代码.2.在父框架对子iframe进行操作. 获取iframe里的内容 主要的两个API就是conten ...

  8. JS操作iframe

    1. 获得iframe的window对象 存在跨域访问限制. chrome:iframeElement. contentWindow firefox: iframeElement.contentWin ...

  9. vue 打印页面部分区域

    1. vue项目打印页面部分区域 2. 原生js实现页面局部打印功能 3. vue项目中将table组件导出Excel表格以及打印页面内容

随机推荐

  1. GMT、UTC、PDT 时间是什么？Linux下如何调整时区

       今天碰到一个时区配置问题,如果服务器时区配置不对,很可能在使用date相关函数时会出现莫名其妙的错误,现将相关时区说明及LINUX下调整时区方法记录如下,以做备忘. GMT GMT 是 Gree ...

  2. 【转】c++笔试题

    原文:http://blog.csdn.net/dongfengsun/article/details/1541926 ①链表反转 单向链表的反转是一个经常被问到的一个面试题,也是一个非常基础的问题. ...

  3. POJ 3522 Slim Span 最小差值生成树

    Slim Span Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://poj.org/problem?id=3522 Description Gi ...

  4. 将word转化为swf 进行如同百度文库的般阅读

    实现如同百度文库那样类似功能需要进行一系列转化,一般流程想将word转化为pdf格式,再将pdf格式转化为swf格式.在网页上显示其实都是swf格式内容. 首先将word转化为swf,需要调用com组 ...

  5. C++ XML解析之TinyXML篇[转]

    最 近使用TinyXML进行C++ XML解析,感觉使用起来比较简单,很容易上手,本文给出一个使用TinyXML进行XML解析的简单例子,很多复杂的应用都可以基于本例子的方法来完 成.以后的文章里会讲 ...

  6. 标准库类型vector

    标准库类型vector表示对象的集合,其中所有对象的类型都相同.集合中的每个对象都有一个与之对应的索引,索引用于访问对象.因为vector“容纳着”其他对象,所以它被称为容器. 要想使用vector, ...

  7. c语言例子递归与整数逆序

    例一 #include <stdio.h> //将一整数逆序后放入一数组中(要求递归实现) void convert(int *result, int n) { if(n>=10) ...

  8. PHP.8-HTML+CSS（二）-HTML详解

    HTML+CSS HTML参考手册[http://www.w3school.com.cn/tags/index.asp] 0.HTML主体标记 代码分为三部分编写 <html> 是网页文件 ...

  9. 小白日记32：kali渗透测试之Web渗透-扫描工具-QWASP_ZAP

    扫描工具-QWASP_ZAP 十大安全工具之一,集成性工具,功能完善,而且强大.既可做主动扫描,也可做截断代理.开源免费跨平台,简单易用,体验相对混乱,但在主动扫描方面,相对占优.[kali集成] # ...

  10. Java对象的序列化和反序列化[转]

    Java基础学习总结--Java对象的序列化和反序列化 一.序列化和反序列化的概念 把对象转换为字节序列的过程称为对象的序列化.把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用 ...