用JS在html页面实现打印功能

柔光的暖阳◎ 2021-07-24 20:31 805阅读 0赞

网页实现全局和局部打印

打印方式一：

1.首先在head里面加入下面一段js代码：

<script language="javascript">
        function preview(fang){
            if (fang < 10){
                bdhtml=window.document.body.innerHTML;//获取当前页的html代码
                sprnstr="";//设置打印开始区域
                eprnstr="";//设置打印结束区域
                prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html
                prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
                window.document.body.innerHTML=prnhtml;
                window.print();
                window.document.body.innerHTML=bdhtml;
            } else {
                window.print();
            }
        }
    </script>

2.然后在所需要打印的代码，用和包围着，如下：

<div id=wdf>
        ...
    </div>

3.最后加上一个打印的按钮

<input type='button' name='button_export' title='打印1' onclick=preview(1) value='打印1'>

打印方式二：

1.javascript中方法为：

<javascript>
        function dayin(){
    	var userAgent = navigator.userAgent.toLowerCase(); //取得浏览器的userAgent字符串
    	if (userAgent.indexOf("trident") > -1){
            alert("请使用google或者360浏览器打印");
            return false;
    	}else if(userAgent.indexOf('msie')>-1){ 
            var onlyChoseAlert = simpleAlert({
                "content":"请使用Google或者360浏览器打印",
                "buttons":{
                   "确定":function () {
                       onlyChoseAlert.close();
                   }
                }
            })
            alert("请使用google或者360浏览器打印");
            return false;
        }else{//其它浏览器使用lodop
            var oldstr = document.body.innerHTML; 
            var headstr = "<html><head><title></title></head><body>";  
            var footstr = "</body>";  
            //执行隐藏打印区域不需要打印的内容
            document.getElementById("otherpho").style.display="none";
            //此处id换为你自己的id
            var printData = document.getElementById("printdivaa").innerHTML; //获得 div 里的所有 html 数据
            document.body.innerHTML = headstr+printData+footstr;
            window.print();
            //打印结束后，放开隐藏内容
            document.getElementById("otherpho").style.display="block";
            document.body.innerHTML = oldstr ;
    	}
        }
    </javascript>

2.页面内容如下：

...
    
    <div id='printdivaa'>
        ...
    </div>
    
    	...

3.页面中放置一个打印按钮：

<button type="button" class="btn_search" onclick="dayin()">打印</button>

打印方式三（此方式会重新打开一个浏览器窗口）：

1.javascript中方法为：

<script>
        //打印操作
        function print() {
            var userAgent = navigator.userAgent.toLowerCase(); //取得浏览器的userAgent字符串
            if (userAgent.indexOf("trident") > -1) {
                alert("请使用google或者360浏览器打印");
                return false;
            } else if (userAgent.indexOf('msie') > -1) {
                var onlyChoseAlert = simpleAlert({
                    "buttons" : {
                    "确定" : function() {
                                onlyChoseAlert.close();
                            }
                    }
                })
                alert("请使用google或者360浏览器打印");
                return false;
            } else {//其它浏览器使用lodop
                var oldstr = document.body.innerHTML;
                var headstr = "<html><head><title></title></head><body>";
                var footstr = "</body></html>";
                //执行隐藏打印区域不需要打印的内容
                document.getElementById("otherpho").style.display="none";
                var printData = document.getElementById("studentPhoTable").innerHTML; //获得 div 里的所有 html 数据
                var wind = window.open("", "newwin","toolbar=no,scrollbars=yes,menubar=no");
                wind.document.body.innerHTML = headstr + printData + footstr;
                wind.print();
                //打印结束后，放开隐藏内容
                document.getElementById("otherpho").style.display="block";
                wind.close();
                window.document.body.innerHTML = oldstr;
            }
        }
    </script>

2.页面内容如下：

...
    
    <div id='studentPhoTable'>
        ...
    </div>
    
    	...

3.页面中放置一个打印按钮：

<input type="button" onclick="print()" value="确定打印" />

谨记：javascript中方法的名称千万不要命成function print()

发表评论取消回复

表情：

评论列表（有 0 条评论，805人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS怎么实现页面打印 JS实现页面打印的方法

JS实现页面打印 1、js实现（可实现局部打印） \[html\] <input id="btnPrint" type="button" value="打印" οncli

亦凉/ 2024年04月01日 11:21/ 0 赞/ 107 阅读

相关 js实现当前页面关闭功能

页面实现 <div> <input type="button" value="关闭当前页" class="close" onclick="closeWin(

男娘i/ 2023年10月18日 15:08/ 0 赞/ 146 阅读

相关在react中实现打印功能

最近项目中，前端采用react+antd+dva的组合，已经完成了后头管理类系统产品的更新迭代工作。今天有一个新需求，需要在后台管理系统中实现点击打印完成指定页面的打印功能

叁歲伎倆/ 2023年06月05日 05:52/ 0 赞/ 17 阅读

相关使用JS实现打印功能

文章目录直接上代码效果如图 > 通常我们会遇到打印报表或者页面内容，这里介绍一种很方便只有几行代码就能实现打印需求的方法。直接上代码

女爷i/ 2022年12月17日 08:56/ 0 赞/ 215 阅读

相关 html如何打印部分网页,前端页面局部打印功能实现

先看打印的效果 ![7532557d21a1][] ![7532557d21a1][] 网上找到的实现如下： doPrint () \{ // 获取当前页的html代

秒速五厘米/ 2022年10月07日 12:49/ 0 赞/ 429 阅读

相关同一个页面内实现html+js表单提交输出功能

<html> <head> <title>同一个页面内实现html+js表单提交输出功能</title> <meta http-equiv="C

以你之姓@/ 2022年08月12日 15:29/ 0 赞/ 184 阅读

相关 JS打印页面内容

将需要打印的东西放入div容器，给div容器指定一个id 原理：生成一个新的打印页面，供window.print()调用 function Print(printp

àì夳堔傛蜴生んèń/ 2022年08月09日 03:09/ 0 赞/ 232 阅读

相关利用 cookie，实现在html页面记住我功能

场景：在平时，我们经常可以在页面中看到记住我的功能，如下图示例，在客户端保存用户输入的登录信息，在我们设定的过期时间内，用户再次访问当前页面时，无需重复输入

红太狼/ 2022年02月20日 15:32/ 0 赞/ 596 阅读

相关用JS在html页面实现打印功能

网页实现全局和局部打印打印方式一： 1.首先在head里面加入下面一段js代码： <script language="javascript">

柔光的暖阳◎/ 2021年07月24日 20:31/ 0 赞/ 806 阅读

相关 js打印功能案例及实现

建议： 1、不需修改的页面可以用当前页局部打印。案例代码： <!DOCTYPE html> <html lang="en"> <head> <meta ch...

朱雀/ 2021年01月19日 14:46/ 0 赞/ 712 阅读