[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器


Posted in Javascript onFebruary 14, 2018

很多网站实现了利用JS保存页面中文本框内容到本地,并另存为指定文件扩展名与编码类型的功能,特别是一些代码教程,JS特效站上更是长见。如何利用JS实现这种功能的呢,下面给出了具体的实现代码

首先建立HTML文件,具体代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<textarea id="code"> 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title></title> 
<style type="text/css"> 
a:hover span{font-weight:bold;color:#F00} 
</style> 
</head> 
<body> 
<a href="#" rel="external nofollow" >鼠标移过来看看这个网址是否变颜色:<span>3water.com</span></a> 
</body> 
</html> 
</textarea>
<button onClick="doSave('code');">另存为</button>

页面中包含一个 textarea文本框和一个 button按钮,点击按钮时把文本框中内容另存为 code.html

下面是实现功能的JS代码

<script language="javascript">
function doSave(obj) {
	obj=document.getElementById('obj');
	if (isIE()){//IE浏览器保存文本框内容
	var winname = 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');
	}
}
function saveAs(obj,filename){//chrome,火狐等现代浏览器保存文本框内容
	var a=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();
} 

function isIE()//判断浏览器类型
{ 
  if(!!window.ActiveXObject || "ActiveXObject" in window) 
    return true; 
  else 
    return false; 
} 
</script>

在IE下利用了JS的 execCommand 的功能而在chrome等现代浏览器下这个功能的没有 saveas 所以我们只能通过超链接标签<a>的一些特性来实现保存功能了,代码中的文件名与扩展名都可以随意更改,如有问题你即时反馈我们

Javascript 相关文章推荐
JS 自动安装exe程序
Nov 30 Javascript
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
js编写的treeview使用方法
Nov 11 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 #jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 #jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 #jQuery
浅谈实现vue2.0响应式的基本思路
Feb 13 #Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 #Javascript
React中的refs的使用教程
Feb 13 #Javascript
tween.js缓动补间动画算法示例
Feb 13 #Javascript
You might like
聊天室php&amp;mysql(五)
2006/10/09 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
document.write的几点使用心得
2014/05/14 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
javascript实现计算器功能
2020/03/30 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Python PIL库图片灰化处理
2020/04/07 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
大学生写自荐信的技巧
2014/01/08 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
个人四风问题整改措施
2014/10/24 职场文书
开幕式邀请函
2015/01/31 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis