使用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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
iframe实用操作锦集
Apr 22 Javascript
javascript if条件判断方法小结
May 17 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
js实现简单计算器
Nov 22 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 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
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
es6数值的扩展方法
2019/03/11 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
Python import用法以及与from...import的区别
2015/05/28 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python3中的json模块使用详解
2018/05/05 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
对python中各个response的使用说明
2020/03/28 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
顶岗实习计划书
2014/01/10 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
自查自纠工作总结
2014/10/15 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
安全教育片观后感
2015/06/17 职场文书
会议主持词结束语
2015/07/03 职场文书
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis