[原创]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 相关文章推荐
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
form自动提交实例讲解
2017/07/10 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
Windows下搭建python开发环境详细步骤
2020/07/20 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Python自带的IDE在哪里
2020/07/01 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
员工自我鉴定范文
2013/10/06 职场文书
单位刻章介绍信范文
2014/01/11 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
网络营销策划方案
2014/06/04 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
体育运动会广播稿
2014/10/05 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
教师个人师德总结
2015/02/06 职场文书
教师远程培训心得体会
2016/01/09 职场文书