window.print()局部打印三种方式
首先准备要打印的内容,也可以打印时再填充,html中定义如下:
<!--startprint-->
<div id="printcontent" style="display:none">
${printContentBody}
</div>
<!--endprint-->
方法一: 通过开始、结束标记(startprint、endprint)来打印
function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符
eprnstr="<!--endprint-->"; //结束打印标识字符串
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTML
window.print(); //调用浏览器的打印功能打印指定区域
window.document.body.innerHTML=bdhtml;//重新给页面内容赋值;
return false;
}
方法二:通过id选择器来替换内容打印,方法类似第一种
function doPrint2(){
if(getExplorer() == "IE"){
pagesetup_null();
}
//根据div标签ID拿到div中的局部内容
bdhtml=window.document.body.innerHTML;
var jubuData = document.getElementById("printcontent").innerHTML;
//把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容
window.document.body.innerHTML= jubuData;
//调用打印功能
window.print();
window.document.body.innerHTML=bdhtml;//重新给页面内容赋值;
return false;
} function pagesetup_null(){
var hkey_root,hkey_path,hkey_key;
hkey_root="HKEY_CURRENT_USER";
hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
try{
var RegWsh = new ActiveXObject("WScript.Shell");
hkey_key="header";
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
hkey_key="footer";
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
}catch(e){}
} function getExplorer() {
var explorer = window.navigator.userAgent ;
//ie
if (explorer.indexOf("MSIE") >= 0) {
return "IE";
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
return "Firefox";
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0){
return "Chrome";
}
//Opera
else if(explorer.indexOf("Opera") >= 0){
return "Opera";
}
//Safari
else if(explorer.indexOf("Safari") >= 0){
return "Safari";
}
}
方法三:通过动态创建iframe来打印(推荐的方法)
这里要注意判断iframe是否存在,防止反复使用时,iframe重复创建消耗内存
function doPrint3(){ //判断iframe是否存在,不存在则创建iframe
var iframe=document.getElementById("print-iframe");
if(!iframe){
var el = document.getElementById("printcontent");
iframe = document.createElement('IFRAME');
var doc = null;
iframe.setAttribute("id", "print-iframe");
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
//这里可以自定义样式
//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个:
1)由于替换来当前页面的内容,从而当取消打印时,会使原来的页面一些form表单失效。
2)当前页面中的样式会影响到打印的内容中的样式。
所以这里推荐使用iframe来创建,并且可以自定义样式。
以上内容在谷歌浏览器下测试通过,其他浏览器未做验证。
-------------------------------------------------------------------------------
190622更新说明:
看到两个伙伴留言,我说说后面发生的事儿吧,我当时做的是电子面单的打印,但是发现第三种方法打印出的电子面单的条码还是不太清洗,字体偏淡。
所以最后也没有用第三种方法,直接使用lodop来打印了。
但是本身第三种方法测试是可行的。
window.print()局部打印三种方式的更多相关文章
- 使用javascript实现在页面打印的效果的三种方式
<div id="console"></div> <script type="text/javascript"> var c ...
- 彻底了解构建 JSON 字符串的三种方式
原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7701856.html 前言:JSON 是轻量级的数据交换格式,很常用,尤其是在使用 Ajax ...
- python 全栈开发,Day94(Promise,箭头函数,Django REST framework,生成json数据三种方式,serializers,Postman使用,外部python脚本调用django)
昨日内容回顾 1. 内容回顾 1. VueX VueX分三部分 1. state 2. mutations 3. actions 存放数据 修改数据的唯一方式 异步操作 修改state中数据的步骤: ...
- Python格式化输出的三种方式
Python格式化输出的三种方式 一.占位符 程序中经常会有这样场景:要求用户输入信息,然后打印成固定的格式比如要求用户输入用户名和年龄,然后打印如下格式:My name is xxx,my age ...
- 格式化输出的三种方式,运算符及流程控制之if判断
''' 格式化输出的三种方式,运算符及流程控制之if判断 ''' # 格式化输出的三种方式 # 一.占位符 程序中经常会有这样场景:要求用户输入信息,然后打印成固定的格式 比如要求用户输入用户名和年龄 ...
- Python实现微信支付(三种方式)
Python实现微信支付(三种方式) 关注公众号"轻松学编程"了解更多. 如果需要python SDk源码,可以加我微信[1257309054] 在文末有二维码. 一.准备环境 1 ...
- Python基础之格式化输出的三种方式
目录 1. 格式化输出的三种方式 1.1 占位符 1.2 format格式化 1.3 f-string格式化 1. 格式化输出的三种方式 在程序中,需要将输出信息打印成固定的格式,这时候就需要格式化输 ...
- iOS字体加载三种方式
静态加载 动态加载 动态下载苹果提供的多种字体 其他 打印出当前所有可用的字体 检查某字体是否已经下载 这是一篇很简短的文章,介绍了 iOS 自定义字体加载的三种方式. 静态加载 这个可以说是最简单最 ...
- JavaScript声明全局变量的三种方式
JavaScript声明全局变量的三种方式 JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为 ...
随机推荐
- 大批量导入数据的SqlBulkCopy类
SqlBulkCopy 这个类用于数据库大批量的数据传递,通常用于新旧数据库之间的更新.关键的一点是,即使表结构不同,也可以通过表字段或者字段位置建立映射关系,将所需的数据导入到目标数据库. 下面代 ...
- 【蓝桥杯】PREV-21 回文数字
题目链接:http://lx.lanqiao.org/problem.page? gpid=T113 历届试题 回文数字 时间限制:1.0s 内存限制:256.0MB 问题描写叙 ...
- Android app启动activity并调用onCreate()方法时都默默地干了什么?
Android app启动activity并调用onCreate() 方法时都默默地干了什么? 在AndroidManifest.xml文件中的<intent-filter>元素中有这 ...
- Windows系统创建符号链接文件
源文件夹:E:\深海 创建新硬链接文件夹:D:\微云同步盘\719179409\4-工作资料\深海 使用快捷键Win + X 打开以下菜单,选择命令提示符(管理员) 敲入以下命令: 创建成功后 ...
- Vue(二):调试神器vue-devtools安装和使用
前言 vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装. 安装 1.chrome商店直 ...
- Android 源码解析:单例模式-通过容器实现单例模式-懒加载方式
本文分析了 Android 系统服务通过容器实现单例,确保系统服务的全局唯一. 开发过 Android 的用户肯定都用过这句代码,主要作用是把布局文件 XML 加载到系统中,转换为 Android 的 ...
- js递归函数使用介绍
所谓的递归函数就是在函数体内调用本函数.使用递归函数一定要注意,处理不当就会进入死循环.递归函数只有在特定的情况下使用 ,比如阶乘问题 一个10以内的阶乘,js递归函数实例代码: <!DOCTY ...
- csc.exe已退出,代码为-532462766
我的surface pro4爆屏了 打电话给微软客服,那边说3,4天内给我回复 只能转移源码等资料到老电脑上,老电脑是神舟 精盾K480N I7D2,装的是WIN10预览版build 1625.rs2 ...
- EditText: 自定义EditText 触摸时无法获取焦点
写了一个自定义View,继承EditText,但是在触摸时无法获取到焦点. 在XML中添加 android:focusableInTouchMode="true" 设置触摸时可以获 ...
- 一起学习Maven
Maven是项目构建工具,能根据配置构建起一个项目. Maven中有一个配置文件,叫pom.xml,而pom的全称是Project Object Model,即项目对象模型,它配置的目标对象是项目. ...