使用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 相关文章推荐
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
js根据后缀判断文件文件类型的代码
May 09 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
Zend 输出产生XML解析错误
2009/03/03 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Python中dict和set的用法讲解
2019/03/28 Python
Django实现分页显示效果
2019/10/31 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
什么是设计模式
2012/06/17 面试题
物理教育专业毕业生推荐信
2013/11/03 职场文书
年度考核自我鉴定
2013/11/09 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
个人思想政治总结
2015/03/05 职场文书
在职证明书模板
2015/06/15 职场文书
Django程序的优化技巧
2021/04/29 Python
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server