使用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 相关文章推荐
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
Angularjs为ng-click事件传递参数
Jun 15 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
小谈php正则提取图片地址
2014/03/27 PHP
调试php程序的简单步骤
2019/10/04 PHP
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
javascript实现动态标签云
2015/10/16 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
React diff算法的实现示例
2018/04/20 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
有原因的手表:Flex Watches
2019/03/23 全球购物
高级工程师岗位职责
2013/12/15 职场文书
活动邀请函范文
2014/01/19 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
个人自我鉴定总结
2014/03/25 职场文书
保护环境倡议书范文
2014/05/13 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
python 管理系统实现mysql交互的示例代码
2021/12/06 Python