JavaScript
搜索
分类

window.print()局部打印三种方式(小结)

作者：硅谷工具人 时间：2024-04-28 10:18:57　

首先准备要打印的内容，也可以打印时再填充，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来打印（推荐的方法）（210616更新）

这里要注意判断iframe是否存在，防止反复使用时，iframe重复创建消耗内存

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
</head>
<body>
<button onclick="doPrint3()">打印</button>

<!--startprint-->
<div id="printcontent" style="display:none">
这里可以自己填充打印内容
</div>
<!--endprint-->

<script type='text/javascript'>
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('<style media="print">@page {size: auto;margin: 0mm;}</style>'); //解决出现页眉页脚和路径的问题
           doc.write('<div>' + el.innerHTML + '</div>');
           doc.close();
           iframe.contentWindow.focus();            
   }
   setTimeout(function(){ iframe.contentWindow.print();},50)  //解决第一次样式不生效的问题
   if (navigator.userAgent.indexOf("MSIE") > 0){
       document.body.removeChild(iframe);
   }  
}
</script>
</body>
</html>

对打印预览页面的居中或者横向、纵向设置可以参考这个链接：https://blog.csdn.net/ZHANGLIZENG/article/details/91865007

使用方法一、二时，弊端有2个：

1）由于替换来当前页面的内容，从而当取消打印时，会使原来的页面一些form表单失效。

2）当前页面中的样式会影响到打印的内容中的样式。

所以这里推荐使用iframe来创建，并且可以自定义样式。

以上内容在谷歌浏览器下测试通过，其他浏览器未做验证。

190622更新说明：

看到两个伙伴留言，我说说后面发生的事儿吧，我当时做的是电子面单的打印，但是发现第三种方法打印出的电子面单的条码还是不太清洗，字体偏淡。

所以最后也没有用第三种方法，直接使用lodop来打印了。

但是本身第三种方法测试是可行的。

20210616更新说明：

结合评论中的反馈，针对第三种方式解决了页眉页脚显示的问题、第一次出现样式不生效的问题。

来源：https://www.cnblogs.com/30go/p/9788990.html

标签：window.print(),局部打印
0
投稿

猜你喜欢

  • 利用Python绘制数据的瀑布图的教程

    2023-03-09 02:33:42

  • python动态参数用法实例分析

    2021-03-02 06:27:51

  • C#连接mariadb(MYSQL分支)代码示例分享

    2024-01-14 01:09:33

  • SQL Server简单查询示例汇总

    2024-01-27 12:19:41

  • python基于event实现线程间通信控制

    2022-04-30 07:10:51

  • 详解如何在CentOS7中使用Nginx和PHP7-FPM安装Nextcloud

    2023-11-10 04:55:49

  • Python unittest框架操作实例解析

    2023-06-12 14:14:57

  • Oracle将查询的结果放入一张自定义表中并再查询数据

    2024-01-24 18:23:56

  • MySQL replace into 语句浅析（一）

    2024-01-25 21:47:57

  • setTimeout与setInterval在不同浏览器下的差异

    2024-04-23 09:23:54

  • 用JavaScript实现UrlEncode和UrlDecode功能

    2008-01-27 11:30:00

  • OpenCV+python3实现视频分解成图片

    2023-05-30 19:10:55

  • 在docker中安装mysql详解

    2024-01-26 09:57:55

  • 利用XMLBean轻轻松松读写XML

    2008-09-04 11:25:00

  • PHP判断数组是否为空的常用方法(五种方法)

    2024-05-11 09:25:53

  • Go基础教程系列之数据类型详细说明

    2024-04-23 09:49:16

  • mssql 指定字段编号sql语句

    2024-01-21 18:58:53

  • python多进程提取处理大量文本的关键词方法

    2022-02-17 13:07:36

  • 深入浅出ES6之let和const命令

    2024-05-22 10:37:21

  • Python使用穷举法求两个数的最大公约数问题

    2022-01-20 21:26:51
    • asp之家 网络编程 m.aspxhome.com