[原创]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 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
小程序云开发之用户注册登录
May 18 Javascript
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高级对象构建 工厂模式的使用
2012/02/05 PHP
php异常处理方法实例汇总
2015/06/24 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
js实现随机8位验证码
2020/07/24 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
Python将string转换到float的实例方法
2019/07/29 Python
详解Python self 参数
2019/08/30 Python
python:动态路由的Flask程序代码
2019/11/22 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
化工工艺专业求职信
2013/09/22 职场文书
采购部岗位职责
2013/11/24 职场文书
商务英语广告词大全
2014/03/18 职场文书
青春无悔演讲稿
2014/05/08 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
golang中的并发和并行
2021/05/08 Golang
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js