使用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 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 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中in_array函数用法探究
2014/11/25 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
jquery对table做排序操作的实例演示
2017/08/10 jQuery
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
Python遍历numpy数组的实例
2018/04/04 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python之yield和Generator深入解析
2019/09/18 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
个人授权委托书
2014/04/03 职场文书
接待员岗位职责
2015/02/13 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python