使用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实现手风琴效果实例代码
Nov 15 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
Angular2库初探
Mar 01 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 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的魔术常量__METHOD__简介
2014/07/08 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
js实现微信聊天效果
2020/08/09 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
Python 文本文件内容批量抽取实例
2018/12/10 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
pytorch 模型可视化的例子
2019/08/17 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
宾馆客房管理制度
2015/08/06 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
学习经验交流会总结
2015/11/02 职场文书
Python如何配置环境变量详解
2021/05/18 Python