使用JavaScript保存文本文件到本地的两种方法


Posted in Javascript onJanuary 22, 2019

一段使用javascript保存文件的代码。这里方法可以保存指定id元素下的所有html内容;不过这个方法只支持IE浏览器。

function createHtml() {
 try {
  save_record("index1", $("#yhtcprediv").html());
 } catch (e) {
  alert(e);
 }
 }
 function save_record(filename, content) {
 //打开新窗口保存
 var winRecord = window.open('about:blank', '_blank', 'top=500');
 winRecord.document.open("text/html", "utf-8");
 winRecord.document.write(" <div class=\"introBox section package boxBg02\" id=\"yhtcprediv\">" + content + "</div>");         
 winRecord.document.execCommand("SaveAs", true, filename + ".html");
 winRecord.close();
 }

简单好用的JS保存文本文件到本地

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css" rel="external nofollow" >
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="description" content="A simple HTML5 Template">
 <meta name="author" content="dron">
 <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <title>保存文本文件到本地</title>
 <link href="http://ucren.com/static/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
 <script src="http://ucren.com/static/jquery/2.2.3/jquery.min.js"></script>
 <script src="http://ucren.com/static/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <style>
  .container-fluid{ margin-top: 20px; }
 </style>
</head>
<body>
 <script>
  void function(a){a.siteToolbar=function b(a){b.setting=a||{}},document.write
  ('<div class="ucren-toolbar-placeholder" style="height:3000px;"></div><scri'
  +'pt src="//ucren.com/ucren-toolbar/scripts/main.js"><\/script>')}(this);
  siteToolbar();
 </script>
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-3">
    <div class="form-group">
     <label>文件内容</label>
     <textarea class="form-control" rows="4" id="content">测试文本,你可以随便修改,完事后点保存。</textarea> 
    </div>
    <div class="form-group">
     <label>文件名</label>
     <input type="text" class="form-control" value="test.txt" id="file-name">
    </div>
    <a id="save-btn" class="btn btn-default" download="test.txt" role="button">保存</a>
   </div>
  </div>
 </div>
 <script>
  void function(){
   var content, fileName, saveBtn;
   content = document.querySelector( '#content' );
   fileName = document.querySelector( '#file-name' );
   saveBtn = document.querySelector( '#save-btn' );
   content.addEventListener( 'change', function self(){
    saveBtn.setAttribute( 'href', 'data:text/paint; utf-8,' + content.value );
    return self;
   }() );
   fileName.addEventListener( 'change', function self(){
    saveBtn.setAttribute( 'download', fileName.value );
    return self;
   }() );
  }();
 </script>
 <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-4190821-1', 'ucren.com');
  ga('send', 'pageview');
 </script>
</body>
</html>
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
微信小程序实现九宫格抽奖
Apr 15 #Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 #Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 #Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 #Javascript
微信小程序全局变量功能与用法详解
Jan 22 #Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 #Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 #Javascript
You might like
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
2019/10/31 Javascript
numpy.delete删除一列或多列的方法
2018/04/03 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
亿企通软件测试面试题
2012/04/10 面试题
超级搞笑检讨书
2014/01/15 职场文书
初一新生军训方案
2014/05/22 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
Python学习之异常中的finally使用详解
2022/03/16 Python
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis