首先准备要打印的内容,也可以打印时再填充,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()局部打印三种方式的更多相关文章

  1. 使用javascript实现在页面打印的效果的三种方式

    <div id="console"></div> <script type="text/javascript"> var c ...

  2. 彻底了解构建 JSON 字符串的三种方式

    原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7701856.html 前言:JSON 是轻量级的数据交换格式,很常用,尤其是在使用 Ajax ...

  3. python 全栈开发,Day94(Promise,箭头函数,Django REST framework,生成json数据三种方式,serializers,Postman使用,外部python脚本调用django)

    昨日内容回顾 1. 内容回顾 1. VueX VueX分三部分 1. state 2. mutations 3. actions 存放数据 修改数据的唯一方式 异步操作 修改state中数据的步骤: ...

  4. Python格式化输出的三种方式

    Python格式化输出的三种方式 一.占位符 程序中经常会有这样场景:要求用户输入信息,然后打印成固定的格式比如要求用户输入用户名和年龄,然后打印如下格式:My name is xxx,my age ...

  5. 格式化输出的三种方式,运算符及流程控制之if判断

    ''' 格式化输出的三种方式,运算符及流程控制之if判断 ''' # 格式化输出的三种方式 # 一.占位符 程序中经常会有这样场景:要求用户输入信息,然后打印成固定的格式 比如要求用户输入用户名和年龄 ...

  6. Python实现微信支付(三种方式)

    Python实现微信支付(三种方式) 关注公众号"轻松学编程"了解更多. 如果需要python SDk源码,可以加我微信[1257309054] 在文末有二维码. 一.准备环境 1 ...

  7. Python基础之格式化输出的三种方式

    目录 1. 格式化输出的三种方式 1.1 占位符 1.2 format格式化 1.3 f-string格式化 1. 格式化输出的三种方式 在程序中,需要将输出信息打印成固定的格式,这时候就需要格式化输 ...

  8. iOS字体加载三种方式

    静态加载 动态加载 动态下载苹果提供的多种字体 其他 打印出当前所有可用的字体 检查某字体是否已经下载 这是一篇很简短的文章,介绍了 iOS 自定义字体加载的三种方式. 静态加载 这个可以说是最简单最 ...

  9. JavaScript声明全局变量的三种方式

    JavaScript声明全局变量的三种方式   JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为 ...

随机推荐

  1. [转]Jackson 解析json数据之忽略解析字段注解@JsonIgnoreProperties

    以前解析json用的惯的就是Google的gson了,用惯了基本就用它了,一直也没发现什么大问题,因为都是解析简单的json数据.但是最近学习springboot,要解析一个比较复杂的json数据.就 ...

  2. Windows平台下tomcat+java的web程序持续占cpu问题调试

    1.问题 Tomcat服务器跑了一段时间后,发现Tomcat进程占用的CPU资源在80%-100%间,加上其它的进程,整个服务器的CPU处理100%运行状态. 2.通过process explorer ...

  3. Android 常用算法

    排序算法 简单排序算法 冒泡排序 两两比较相邻记录的关键字,如果反序则交换,直到没有反序的记录为止 直接插入排序 通过 n-i 次关键字间的比较,从 n-i+1 个记录中选出关键字最小的记录,并和第 ...

  4. Java 泛型(Generics) 综述

    一. 引子 一般的类和方法.仅仅能使用详细类型:要么是基本类型.要么是自己定义类型.假设要编写能够应用于多种类型的代码,这样的刻板的限制对代码的束缚就会非常大. 多态算是一种泛化机制,但对代码的约束还 ...

  5. 行为类模式(五):中介者(Mediator)

    定义 定义一个中介对象来封装系列对象之间的交互.中介者使各个对象不需要显示地相互引用,从而使其耦合性松散,而且可以独立地改变他们之间的交互. 试想一下,如果多个类之间相互都有引用,那么当其中一个类修改 ...

  6. oracle sql合计结果信息使用分组的小问题

    --月统计 Select SUBSTR(t.BalanceDate,1,6) as Mon, t.RechargeType , SUM(t.SumNum) as SumNum , SUM(t.SumF ...

  7. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  8. [Windows Azure] How to use the Queue Storage Service

    How to use the Queue Storage Service version 1.7 version 2.0 This guide will show you how to perform ...

  9. C#之Console

    Console.Write  表示向控制台直接写入字符串,不进行换行,可继续接着前面的字符写入.Console.WriteLine  表示向控制台写入字符串后换行.Console.Read 表示从控制 ...

  10. centos 7 min 编译安装php5.6+nginx1.7.5 笔记

    1.安装mysql请参照 centos 7 min 编译安装mysql5.6.20 笔记 2.编译安装php5.6+nginx1.7.5 2.1.安装php5.6.0 首先添加依赖应用yum inst ...