JS调用iframe方式实现Web区域打印页面内容
1、程序说明
1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印;
2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容。
2、代码部分
1) JS 函数:
代码如下 | 复制代码 |
function do_print(id_str)//id-str 打印区域的id 2) HTML: // 打印区域: |
CSS:
根据具体需要进行修改添加。
3. 测试
点击页面上的打印按钮,即可测试打印;
除了上面方法我们还可以通过jquery来实例,代码如下
代码如下 | 复制代码 |
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> $("div#myPrintArea").printArea(); }); <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区域打印页面内容的更多相关文章
- Vue项目中将table组件导出Excel表格以及打印页面内容
体验更优排版请移步原文:http://blog.kwin.wang/programming/vue-table-export-excel-and-print.html 页面中显示的table表格,经常 ...
- jquery、js调用iframe父窗口与子窗口元素的方法整理
1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 ...
- 使用jqprint插件实现打印页面内容
业务场景 客户需要在页面有一个打印按钮,点击之后可以打印Echarts图表的内容以及文字提示信息,经谷歌搜索发现,实现方法大概有三种之多,其他两种不太熟悉,而采用的这种打印方式是一个在jQuery的基 ...
- 关于js调用外部部署的web api
没想到多年之后我还得继续写这些东西.... 瀑布汗~ 最近不得不开始研究用web api MVC的项目中,在js文件里,实现点击一个按钮调用外部发布好的api,再从api把值回传给js页面,跳转. 经 ...
- 打印页面内容,<input>不好使,用<textarea> 代替
<textarea class="sld-textarea" onchange="changeTextareaValue(this)">123< ...
- WebView中JS调用Android Method 遇到的坑整理
WebView是android中常用的一个组件,其作用是展示网页,并让网页和android app进行一些业务逻辑上的交互. 其坑无数,相信用过的都知道,一个一个来解决吧. 1.怎么互调: <! ...
- js对iframe内外(父子)页面进行操作
dom对象推荐阅读 怎么对iframe进行操作,1.在iframe里面控制iframe外面的js代码.2.在父框架对子iframe进行操作. 获取iframe里的内容 主要的两个API就是conten ...
- JS操作iframe
1. 获得iframe的window对象 存在跨域访问限制. chrome:iframeElement. contentWindow firefox: iframeElement.contentWin ...
- vue 打印页面部分区域
1. vue项目打印页面部分区域 2. 原生js实现页面局部打印功能 3. vue项目中将table组件导出Excel表格以及打印页面内容
随机推荐
- jeewx的使用_02 解析微信服务器post过来的数据
如果在微信公众号接入了第三方的URL,那么用户微信服务器的请求将会被推送到第三方的URL上面,那么该如何解析数据呢?下面来分析 找到MessageUtil.java 这个类中有一个parseXml的静 ...
- spring事务注解
@Transactional只能被应用到public方法上, 对于其它非public的方法,如果标记了@Transactional也不会报错,但方法没有事务功能. Spring使用声明式事务处理,默认 ...
- 最小投票BZOJ 1934([Shoi2007]Vote 善意的投票-最小割)
上班之余抽点时间出来写写博文,希望对新接触的朋友有帮助.今天在这里和大家一起学习一下最小投票 1934: [Shoi2007]Vote 好心的投票 Time Limit: 1 Sec Memory L ...
- ZOJ1109_Language of FatMouse(STL/map)
解题报告 题意: 略. 思路: map应用. #include <algorithm> #include <iostream> #include <cstring> ...
- as 中的反射
flash.utils包中的getDefinitionByName,getQualifiedClassName,getQualifiedSuperclassName..可以当做反射用. 1.getDe ...
- 浅谈Linux的内存管理机制
转至:http://ixdba.blog.51cto.com/2895551/541355 一 物理内存和虚拟内存 我们知道,直接从物理内存读写数据要比从硬盘读写数据要快的多,因此, ...
- 根据Entity Framework6.X 数据生成代码(仅获取表名)
近来学习ASP.NET MVC ,一直在看韩迎龙(Kencery)的ASP.NET MVC+EF框架+EasyUI实现权限管理.在第九节(TT模板的学习)卡住了,作者使用EF5.0做数据源,而我使用的 ...
- javaScript入门--引用类型
前面提到过,引用类型的值便是对象,在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起,而对象则是某个特定引用类型的实例. var a=new Object(); 上面便声明了 ...
- iOS之Storyboard References
如果你曾经使用 interface builder 创建过一个复杂.界面非常多的应用,你就会明白最后那些Storyboards 文件变的有多大.他会迅速变的无法管理,阻碍你的进度.自从引入 Story ...
- JPA与ORM以及Hibernate