使用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 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
js实现头像上传并且可预览提交
Dec 25 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
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
初三物理教学反思
2014/01/21 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
班组拓展活动方案
2014/08/14 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
教师党员个人自我评价
2015/03/04 职场文书
休学证明范本
2015/06/19 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
Mysql中常用的join连接方式
2022/05/11 MySQL