使用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 相关文章推荐
jquery 页面全选框实践代码
Apr 02 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
RequireJs的使用详解
Feb 19 Javascript
php 修改密码实现代码
May 24 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 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调用Java对象的方法
2006/10/09 PHP
php intval的测试代码发现问题
2008/07/27 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
js实现随机点名程序
2020/09/17 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
python3实现猜数字游戏
2020/12/07 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
Keras搭建自编码器操作
2020/07/03 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
十八届三中全会学习方案
2014/02/16 职场文书
奥利奥广告词
2014/03/20 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
合作与交流自我评价
2015/03/09 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
总经理司机岗位职责
2015/04/10 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
python基础之while循环语句的使用
2021/04/20 Python