js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器 原创
很多网站实现了利用JS保存页面中文本框内容到本地,并另存为指定文件扩展名与编码类型的功能,特别是一些代码教程,JS特效站上更是长见。如何利用JS实现这种功能的呢,下面给出了具体的实现代码
首先建立HTML文件,具体代码如下
无标题文档 <!DOCTYPEHTML> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"> <title></title> <styletype="text/css"> a:hoverspan{font-weight:bold;color:#F00} </style> </head> <body> <ahref="#"rel="externalnofollow">鼠标移过来看看这个网址是否变颜色:<span>www.nhooo.com</span></a> </body> </html> 另存为
页面中包含一个textarea文本框和一个button按钮,点击按钮时把文本框中内容另存为code.html
下面是实现功能的JS代码
functiondoSave(obj){ obj=document.getElementById('obj'); if(isIE()){//IE浏览器保存文本框内容 varwinname=window.open('','_blank','top=10000'); winname.document.open('text/html','replace'); winname.document.writeln(obj.value); winname.document.execCommand('saveas','','code.htm'); winname.close();} else{ saveAs(obj,'code.html'); } } functionsaveAs(obj,filename){//chrome,火狐等现代浏览器保存文本框内容 vara=document.createElement('a'); a.setAttribute('href','data:text/html;gb2312,'+obj.value); a.setAttribute('download',filename); a.setAttribute('target','_blank'); a.style.display="none"; obj.parentNode.appendChild(a); a.click(); } functionisIE()//判断浏览器类型 { if(!!window.ActiveXObject||"ActiveXObject"inwindow) returntrue; else returnfalse; }
在IE下利用了JS的execCommand的功能而在chrome等现代浏览器下这个功能的没有saveas所以我们只能通过超链接标签的一些特性来实现保存功能了,代码中的文件名与扩展名都可以随意更改,如有问题你即时反馈我们