使用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 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
vue使用element-ui按需引入
May 20 Vue.js
微信小程序实现九宫格抽奖
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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
PHP新手上路(九)
2006/10/09 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
jquery ztree实现右键收藏功能
2017/11/20 jQuery
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python实现基于SVM手写数字识别功能
2020/05/27 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
车辆安全检查制度
2014/01/12 职场文书
读书演讲主持词
2014/03/18 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
职工食堂管理制度
2015/08/06 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python