当前位置:首页 > 技术博客 > JavaScript > 用JS在html页面实现打印功能

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

6年前 (2019-06-22)JavaScript711

做项目时,有在网页实现全局和局部打印的需求,现总结如下:

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 ;
        }}

html内容:

<div id='printdivaa'> 打印的内容  </div>
//按钮
<button type="button" class="btn_search"> 打印 </button>


版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/11.html

标签: HTMLJavaScript

相关文章

通俗的理解js中的&&和||

通俗的理解js中的&&和||

js中的&&和||本质是什么呢?进行布尔值的且和或的运算。当运算到某一个变量就得出最终结果之后,就返回哪个变量。在javascript中:以下内...

JavaScript 中定义数组和操作数组

JavaScript 中定义数组和操作数组

一.认识数组数组就是某类数据的集合,数据类型可以是整型、字符串、甚至是对象Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),...

百度地图JavaScript简单标点连线

百度地图JavaScript简单标点连线

背景最近在研究轨迹数据的挖掘,第一步就是把轨迹数据在地图上可视化出来,然后再进行后续的算法研究。从一开始懵懂知道百度地图有免费的 API 可以调用,到后面知道还...

【硬核原创】网站标题根据用户变化而变化

【硬核原创】网站标题根据用户变化而变化

最近有朋友问我 www.timicm.com 这个网站的标题效果什么实现的,本着无私奉献的精神和你们分享一下title是不断变化的,怎么变化呢?当你访...

Bilibili头部景深对焦效果

Bilibili头部景深对焦效果

交互式鼠标悬停头图景深对焦效果<head>       <meta n...

响应式人物介绍列表ui切换特效

响应式人物介绍列表ui切换特效

一款js css3制作响应式的人物介绍图文列表,带左右按钮控制列表滑动切换效果。可用于企业团队人物介绍ui布局。下载链接: https://pan.baidu....

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。