104828720
104828720

JS实现打印的方式

目前正在做浏览器端采用js方式实现打印这么一个功能，JS打印实现的方法很多，但是兼容各个浏览器实现打印预览的功能有些棘手，现将实现的内容及遇到的问题记录下来，希望有大牛看到所提的问题后可以给予解答，在此感谢啦。

1.JS实现打印的方式

  • 方式一：window.print()
window.print();会弹出打印对话框，打印的是window.document.body.innerHTML中的内容，下面是从网上摘到的一个局部打印的例子，该例子的不足是打印会修改页面的内容。 
  
  
  
  
局部打印案例  
  
  
  
  

1不需要打印的地方
  

2这里不要打印啊
  
  

打印标题
  

打印内容~~
  
  
  

不打印的地方啊哈哈哈哈
  

2
  • 方式二：使用html 标签引入Webbrowser控件

    这种方式是其只兼容IE，其他浏览器不可使用，同时IE10以下的浏览器才可以使用，调用方式如下：

    这种方式优势是在IE下可以弹出打印预览，这是打印很人性化的功能，但是遗憾的是高版本的IE浏览器不支持WebBrowser了

    • 方式三：采用document.execCommand(”print”)
    该方式也兼容各个版本的浏览器，同window.print()一样，其启动的是打印对话框，chrome的打印对话框自带预览功能，但是IE、火狐仅仅只弹出打印设置对话框，没有预览功能。
    • 方式四：采用JQuery插件

    使用jQuery浏览插件可以很方便的进行局部打印，常用的插件有：

    1)jquery.print.js 下载地址：https://github.com/DoersGuild...

    2)jquery.print-preview.js 下载地址：https://github.com/etimbo/jqu...

    这两种方式使用都很简单，1）通过$("#id").print(/*options*/);调用；2）通过$('#id').printArea(/options/); 其中的option可选项可以在下载地址下载下来后看示例代码，一般options不用传即可，示例代码如下：

      
  
  
JQuery打印
    • 方式五：采用浏览器打印第三方插件

    该方式需要用户浏览器安装相关的第三方插件，用户体验不好，故在此不细述了。

    2.打印预览

    chrome浏览器、win10自带的IE浏览器 调用打印弹出的打印设置界面中包含打印预览部分，故其通过上面的打印函数的调用即可实现。

    IE9以后的版本、火狐不支持webbrowser控件了，JS调用不了浏览器的打印预览的功能，我们只能用iframe模拟打印预览的对话框，将需要打印的内容显示在该对话框中，然后在调用打印的功能实现打印。

    • 1）jquery打印预览插件

    jquery.print-preview.js 下载地址：https://github.com/etimbo/jqu...

    其实现的效果如下图（其自动的示例代码）

    • 2）webbrowser控件打印预览

    IE8及以下版本可以调用WebBrowser.ExecWB(7,1) 函数弹出浏览器的打印预览对话框，采用该函数的好处是 用户可以在打印预览对话框中 调整页边距、页眉、页脚；

    下面贴出的是设置页边距、页眉、页脚的JS代码

    //取得页面打印设置的原参数数据     
function PageSetup_temp(){     
    try     
    {     
       var Wsh=new ActiveXObject("WScript.Shell");     
       HKEY_Key="header";     
        //取得页眉默认值     
       head = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);     
       HKEY_Key="footer";     
        //取得页脚默认值     
       foot = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);     
       HKEY_Key="margin_bottom";     
        //取得下页边距     
       bottom = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);     
       HKEY_Key="margin_left";     
        //取得左页边距     
       left = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);     
       HKEY_Key="margin_right";     
        //取得右页边距     
       right = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);     
       HKEY_Key="margin_top";     
        //取得上页边距     
       top = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);     
    }     
    catch(e){     
         //alert("不允许ActiveX控件");     
    }     
}  



//设置网页打印的页眉页脚和页边距，注册表里的单位是英寸，打印设置中是毫米，1英寸=25.4毫米     
function PageSetup_Null(){     
    try     
    {     
       var Wsh=new ActiveXObject("WScript.Shell");     
       HKEY_Key="header";     
        //设置页眉（为空）     
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");     
       HKEY_Key="footer";     
        //设置页脚（为空）     
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");     
       HKEY_Key="margin_bottom";     
        //设置下页边距（0）     
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.6");     
       HKEY_Key="margin_left";     
        //设置左页边距（0）     
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.3");     
       HKEY_Key="margin_right";     
        //设置右页边距（0）     
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.3");     
       HKEY_Key="margin_top";     
        //设置上页边距（8）     
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.6");     
    }     
    catch(e){     
         //alert("不允许ActiveX控件");     
    }     
}     
  
//设置网页打印的页眉页脚和页边距为默认值     
function PageSetup_Default(){        
    try     
    {     
       var Wsh=new ActiveXObject("WScript.Shell");     
       HKEY_Key="header";     
       HKEY_Key="header";     
        //还原页眉     
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,head);     
       HKEY_Key="footer";     
        //还原页脚     
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,foot);     
       HKEY_Key="margin_bottom";     
        //还原下页边距     
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,bottom);     
       HKEY_Key="margin_left";     
        //还原左页边距     
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,left);     
       HKEY_Key="margin_right";     
        //还原右页边距     
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,right);     
       HKEY_Key="margin_top";     
        //还原上页边距     
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,top);     
    }     
    catch(e){     
         //alert("不允许ActiveX控件");     
    }     
}  
//取得页面打印设置的原参数数据   
function PageSetup_temp(){   
    try   
    {   
       var Wsh=new ActiveXObject("WScript.Shell");   
       HKEY_Key="header";   
        //取得页眉默认值   
       head = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);   
       HKEY_Key="footer";   
        //取得页脚默认值   
       foot = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);   
       HKEY_Key="margin_bottom";   
        //取得下页边距   
       bottom = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);   
       HKEY_Key="margin_left";   
        //取得左页边距   
       left = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);   
       HKEY_Key="margin_right";   
        //取得右页边距   
       right = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);   
       HKEY_Key="margin_top";   
        //取得上页边距   
       top = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);   
    }   
    catch(e){   
         //alert("不允许ActiveX控件");   
    }   
}   



//设置网页打印的页眉页脚和页边距，注册表里的单位是英寸，打印设置中是毫米，1英寸=25.4毫米   
function PageSetup_Null(){   
    try   
    {   
       var Wsh=new ActiveXObject("WScript.Shell");   
       HKEY_Key="header";   
        //设置页眉（为空）   
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");   
       HKEY_Key="footer";   
        //设置页脚（为空）   
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");   
       HKEY_Key="margin_bottom";   
        //设置下页边距（0）   
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.6");   
       HKEY_Key="margin_left";   
        //设置左页边距（0）   
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.3");   
       HKEY_Key="margin_right";   
        //设置右页边距（0）   
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.3");   
       HKEY_Key="margin_top";   
        //设置上页边距（8）   
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.6");   
    }   
    catch(e){   
         //alert("不允许ActiveX控件");   
    }   
}   
 
//设置网页打印的页眉页脚和页边距为默认值   
function PageSetup_Default(){      
    try   
    {   
       var Wsh=new ActiveXObject("WScript.Shell");   
       HKEY_Key="header";   
       HKEY_Key="header";   
        //还原页眉   
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,head);   
       HKEY_Key="footer";   
        //还原页脚   
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,foot);   
       HKEY_Key="margin_bottom";   
        //还原下页边距   
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,bottom);   
       HKEY_Key="margin_left";   
        //还原左页边距   
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,left);   
       HKEY_Key="margin_right";   
        //还原右页边距   
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,right);   
       HKEY_Key="margin_top";   
        //还原上页边距   
       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,top);   
    }   
    catch(e){   
         //alert("不允许ActiveX控件");   
    }   
}

    使用该函数，会弹出

    通过网页修改activex安全设置，添加信任站点，禁用该弹出窗口提示，代码如下：

    function activeXControl(){  
        try{  
        var WshShell=new ActiveXObject("WScript.Shell");  
          
        //添加信任站点(http://127.0.0.1)  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\ZoneMap\\Ranges\\Range100\\","");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\ZoneMap\\Ranges\\Range100\\:Range","127.0.0.1");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\ZoneMap\\Ranges\\Range100\\http","2","REG_DWORD");  
  
        //修改IE ActiveX安全设置: 1本地Intranet区域  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\1001","0","REG_DWORD");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\1004","0","REG_DWORD");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\1200","0","REG_DWORD");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\1201","0","REG_DWORD");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\1405","0","REG_DWORD");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\2201","0","REG_DWORD");  
  
        //修改IE ActiveX安全设置:2受信任的站点区域  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\1001","0","REG_DWORD");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\1004","0","REG_DWORD");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\1200","0","REG_DWORD");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\1201","0","REG_DWORD");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\1405","0","REG_DWORD");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\2201","0","REG_DWORD");  
          
        //修改IE ActiveX安全设置:3Internet区域  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1001","0","REG_DWORD");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1004","0","REG_DWORD");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1200","0","REG_DWORD");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1201","0","REG_DWORD");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1405","0","REG_DWORD");  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\2201","0","REG_DWORD");  
  
        //禁用Winxp弹出窗口阻止程序  
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\New Windows\\PopupMgr","no");  
    }catch(e){     
         //alert("不允许ActiveX控件");     
    }     
}  
function activeXControl(){
        try{
        var WshShell=new ActiveXObject("WScript.Shell");
        
        //添加信任站点(http://127.0.0.1)
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\ZoneMap\\Ranges\\Range100\\","");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\ZoneMap\\Ranges\\Range100\\:Range","127.0.0.1");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\ZoneMap\\Ranges\\Range100\\http","2","REG_DWORD");
 
        //修改IE ActiveX安全设置: 1本地Intranet区域
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\1001","0","REG_DWORD");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\1004","0","REG_DWORD");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\1200","0","REG_DWORD");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\1201","0","REG_DWORD");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\1405","0","REG_DWORD");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\2201","0","REG_DWORD");
 
        //修改IE ActiveX安全设置:2受信任的站点区域
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\1001","0","REG_DWORD");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\1004","0","REG_DWORD");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\1200","0","REG_DWORD");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\1201","0","REG_DWORD");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\1405","0","REG_DWORD");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\2201","0","REG_DWORD");
        
        //修改IE ActiveX安全设置:3Internet区域
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1001","0","REG_DWORD");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1004","0","REG_DWORD");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1200","0","REG_DWORD");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1201","0","REG_DWORD");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1405","0","REG_DWORD");
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\2201","0","REG_DWORD");
 
        //禁用Winxp弹出窗口阻止程序
        WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\New Windows\\PopupMgr","no");
    }catch(e){   
         //alert("不允许ActiveX控件");   
    }   
}

    3.问题
    1）网页修改activex安全设置该段代码也是必须在启用ActiveX的条件下调用成功，是需要用户在Internet的配置项中设置的(如下图），如何才能自动启用该插件？

    2) chrome、火狐如何通过JS设置页边距、页眉、页脚?

    3) IE高版本浏览器、火狐如何通过JS弹出浏览器自己的打印预览?

    你可能感兴趣的:(javascript)

    • Long类型前后端数据不一致 igotyback 前端
      响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
      ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
      ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
      Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    • node.js学习 小猿L node.jsnode.js学习vim
      node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
    • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
      在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
    • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
      在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
    • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
      切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
    • 高性能javascript--算法和流程控制 海淀萌狗
      -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
    • 360前端星计划-动画可以这么玩 马小蜗
      动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
    • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
      我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
    • Nginx从入门到实践(三) 听你讲故事啊
      动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
    • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
      Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
    • 前端知识点 ZhangTao_zata 前端javascriptcss
      下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
    • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
      前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
    • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
      点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
    • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
      前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
    • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
      在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
    • 2019-05-29 vue-router的两种模式的区别 Kason晨
      1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
    • electron多标签页模式更像客户端 diygwcom electronjavascript前端
      Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
    • 外卖霸王餐返利外卖会员卡小程序开发 闹小艾 good506070微信小程序小程序
      外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
    • Axure设计之全屏与退出全屏交互实现 招风的黑耳 Axureaxure交互
      在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
    • 全面指南：用户行为从前端数据采集到实时处理的最佳实践 数字沉思 营销流量运营系统架构前端内容运营大数据
      引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
    • EcmaScript和JavaScript的区别 每天吃八顿 前端ecmascript
      ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
    • javascript添加p元素，html添加文字，appendChild 游勇一 javascripthtml添加pappendChild
      javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
    • CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制 SteveJi666 WebGLcesiumEarthSDKSuperMap3djavascript前端arcgis
      版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
    • html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示 睿理
      html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
    • 如何在 Python 中声明一个静态属性? 潮易 python开发语言
      在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
    • 数据格式：什么是JSON和XML isNotNullX jsonxml
      JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是
    • HighCharts图表自动化简介 知识的宝藏 Selenium高级篇Selenium图表自动化测试highcharts图表自动化Selenium图表自动化图表自动化测试highchartsSelenium
      什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
    • 项目中 枚举与注解的结合使用 飞翔的马甲 javaenumannotation
      前言：版本兼容，一直是迭代开发头疼的事，最近新版本加上了支持新题型，如果新创建一份问卷包含了新题型，那旧版本客户端就不支持，如果新创建的问卷不包含新题型，那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。 一、枚举 1.在创建枚举类的时候，该类已继承java.lang.Enum类，所以自定义枚举类无法继承别的类，但可以实现接口。
    • 【Scala十七】Scala核心十一：下划线_的用法 bit1129 scala
      下划线_在Scala中广泛应用，_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方，本文将不断完善_的使用场景以及所表达的含义   1. 在高阶函数中使用 scala> val list = List(-3,8,7,9) list: List[Int] = List(-3, 8, 7, 9) scala> list.filter(_ > 7) r
    • web缓存基础：术语、http报头和缓存策略 dalan_123 Web
      对于很多人来说，去访问某一个站点，若是该站点能够提供智能化的内容缓存来提高用户体验，那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储，是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求，这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念，具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容，并谈论下
    • crontab 问题 周凡杨 linuxcrontabunix
        一： 0481-079   Reached   a   symbol   that   is   not   expected.   背景： */5   *   *   *   *  /usr/IBMIHS/rsync.sh 
    • 让tomcat支持2级域名共享session g21121 session
      tomcat默认情况下是不支持2级域名共享session的，所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况，但是只需修改几处配置就可以了。 打开tomcat下conf下context.xml文件 找到Context标签,修改为如下内容 如果你的域名是www.test.com <Context sessionCookiePath="/path&q
    • web报表工具FineReport常用函数的用法总结（数学和三角函数） 老A不折腾 Webfinereport总结
        ABS ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 Number:需要求出绝对值的任意实数。 示例: ABS(-1.5)等于1.5。 ABS(0)等于0。 ABS(2.5)等于2.5。   ACOS ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度，返回角度以弧度形式表示。 Number:需要返回角
    • linux 启动java进程 sh文件 墙头上一根草 linuxshelljar
      #!/bin/bash #初始化服务器的进程PId变量 user_pid=0; robot_pid=0; loadlort_pid=0; gateway_pid=0; ######### #检查相关服务器是否启动成功 #说明： #使用JDK自带的JPS命令及grep命令组合，准确查找pid #jps 加 l 参数，表示显示java的完整包路径 #使用awk，分割出pid
    • 我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory aijuans Spring 3 系列
      如何使用ApplicationContext替换BeanFactory？ package onlyfun.caterpillar.device; import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.xml.XmlBeanFactory; import
    • Linux 内存使用方法详细解析 annan211 linux内存Linux内存解析
      来源 http://blog.jobbole.com/45748/ 我是一名程序员，那么我在这里以一个程序员的角度来讲解Linux内存的使用。 一提到内存管理，我们头脑中闪出的两个概念，就是虚拟内存，与物理内存。这两个概念主要来自于linux内核的支持。 Linux在内存管理上份为两级，一级是线性区，类似于00c73000-00c88000，对应于虚拟内存，它实际上不占用
    • 数据库的单表查询常用命令及使用方法(-) 百合不是茶 oracle函数单表查询
          创建数据库;       --建表 create table bloguser(username varchar2(20),userage number(10),usersex char(2));       创建bloguser表,里面有三个字段     &nbs
    • 多线程基础知识 bijian1013 java多线程threadjava多线程
      一．进程和线程 进程就是一个在内存中独立运行的程序，有自己的地址空间。如正在运行的写字板程序就是一个进程。 “多任务”：指操作系统能同时运行多个进程（程序）。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。 线程：是进程内部单一的一个顺序控制流。 线程和进程 a.       每个进程都有独立的
    • fastjson简单使用实例 bijian1013 fastjson
      一.简介         阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法，把JSON Parse的性能提升到极致，是目前Java语言中最快的JSON库；包括“序列化”和“反序列化”两部分，它具备如下特征：     
    • 【RPC框架Burlap】Spring集成Burlap bit1129 spring
      Burlap和Hessian同属于codehaus的RPC调用框架，但是Burlap已经几年不更新，所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时，不应该考虑Burlap了。 这篇文章还是记录下Burlap的用法吧，主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成  
    • 【Mahout一】基于Mahout 命令参数含义 bit1129 Mahout
      1. mahout seqdirectory   $ mahout seqdirectory --input (-i) input Path to job input directory(原始文本文件). --output (-o) output The directory pathna
    • linux使用flock文件锁解决脚本重复执行问题 ronin47 linux lock　重复执行
      linux的crontab命令，可以定时执行操作，最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题，如果设定了任务每分钟执行一次，但有可能一分钟内任务并没有执行完成，这时系统会再执行任务。导致两个相同的任务在执行。 例如： <? //  test .php
    • java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 bylijinnan java
      public class OcuppyMoreThanHalf { /** * Q74 数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 * two solutions: * 1.O(n) * see <beauty of coding>--每次删除两个不同的数字，不改变数组的特性 * 2.O(nlogn) * 排序。中间
    • linux 系统相关命令 candiio linux
      系统参数 cat /proc/cpuinfo  cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况 性能参数 1）top M：按内存使用排序 P：按CPU占用排序 1：显示各CPU的使用情况 k：kill进程 o：更多排序规则 回车：刷新数据 2）ulimit ulimit -a：显示本用户的系统限制参
    • [经营与资产]保持独立性和稳定性对于软件开发的重要意义 comsci 软件开发
           一个软件的架构从诞生到成熟，中间要经过很多次的修正和改造       如果在这个过程中，外界的其它行业的资本不断的介入这种软件架构的升级过程中           那么软件开发者原有的设计思想和开发路线
    • 在CentOS5.5上编译OpenJDK6 Cwind linuxOpenJDK
      几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6，将编译过程和遇到的问题作一简要记录，备查。 0. OpenJDK介绍 OpenJDK是Sun（现Oracle）公司发布的基于GPL许可的Java平台的实现。其优点： 1、它的核心代码与同时期Sun（-> Oracle）的产品版基本上是一样的，血统纯正，不用担心性能问题，也基本上没什么兼容性问题；（代码上最主要的差异是
    • java乱码问题 dashuaifu java乱码问题js中文乱码
      swfupload上传文件参数值为中文传递到后台接收中文乱码     在js中用setPostParams（{"tag" : encodeURI( document.getElementByIdx_x("filetag").value，"utf-8")}）; 然后在servlet中String t
    • cygwin很多命令显示command not found的解决办法 dcj3sjt126com cygwin
      cygwin很多命令显示command not found的解决办法   修改cygwin.BAT文件如下 @echo off D: set CYGWIN=tty notitle glob set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us
    • [介绍]从 Yii 1.1 升级 dcj3sjt126com PHPyii2
      2.0 版框架是完全重写的，在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单，通过本指南你将会了解两个版本间主要的不同之处。 如果你之前没有用过 Yii 1.1，可以跳过本章，直接从"入门篇"开始读起。 请注意，Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发
    • Linux SSH免登录配置总结 eksliang ssh-keygenLinux SSH免登录认证Linux SSH互信
      转载请出自出处：http://eksliang.iteye.com/blog/2187265 一、原理      我们使用ssh-keygen在ServerA上生成私钥跟公钥，将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。      生成公钥与私钥有两种加密方式，第一种是
    • 手势滑动销毁Activity gundumw100 android
      老是效仿ios，做android的真悲催！ 有需求：需要手势滑动销毁一个Activity 怎么办尼？自己写？ 不用~，网上先问一下百度。 结果： http://blog.csdn.net/xiaanming/article/details/20934541 首先将你需要的Activity继承SwipeBackActivity，它会在你的布局根目录新增一层SwipeBackLay
    • JavaScript变换表格边框颜色 ini JavaScripthtmlWebhtml5css
      效果查看：http://hovertree.com/texiao/js/2.htm代码如下，保存到HTML文件也可以查看效果： <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码-何问起</title> </head> <body&
    • Kafka Rest : Confluent kane_xie kafkaRESTconfluent
      最近拿到一个kafka rest的需求，但kafka暂时还没有提供rest api（应该是有在开发中，毕竟rest这么火），上网搜了一下，找到一个Confluent Platform，本文简单介绍一下安装。 这里插一句，给大家推荐一个九尾搜索，原名叫谷粉SOSO，不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了，出来之后用度娘搜技术问题，那匹配度简直感人。 环境声明：Ubu
    • Calender不是单例 men4661273 单例Calender
               在我们使用Calender的时候，使用过Calendar.getInstance()来获取一个日期类的对象，这种方式跟单例的获取方式一样，那么它到底是不是单例呢，如果是单例的话，一个对象修改内容之后，另外一个线程中的数据不久乱套了吗？从试验以及源码中可以得出，Calendar不是单例。 测试： Calendar c1 =
    • 线程内存和主内存之间联系 qifeifei java thread
      1， java多线程共享主内存中变量的时候，一共会经过几个阶段，    lock:将主内存中的变量锁定，为一个线程所独占。   unclock:将lock加的锁定解除，此时其它的线程可以有机会访问此变量。   read:将主内存中的变量值读到工作内存当中。   load:将read读取的值保存到工作内存中的变量副本中。  
    • schedule和scheduleAtFixedRate tangqi609567707 javatimerschedule
      原文地址：http://blog.csdn.net/weidan1121/article/details/527307 import java.util.Timer;import java.util.TimerTask;import java.util.Date; /** * @author vincent */public class TimerTest {  
    • erlang 部署 wudixiaotie erlang
      1.如果在启动节点的时候报这个错 ： {"init terminating in do_boot",{'cannot load',elf_format,get_files}} 则需要在reltool.config中加入 {app, hipe, [{incl_cond, exclude}]},     2.当generate时，遇到： ERROR