使用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的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
vue实现底部菜单功能
Jul 24 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
vue 中固定导航栏的实例代码
Nov 01 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
一个JS翻页效果
2007/07/23 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
详解微信小程序中组件通讯
2018/10/30 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
python with statement 进行文件操作指南
2014/08/22 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
微信跳一跳游戏python脚本
2020/04/01 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
详解Python 中的容器 collections
2020/08/17 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
瀑布模型都有哪些优缺点
2014/06/23 面试题
优秀应届毕业生自荐信
2013/11/16 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
浅析Python OpenCV三种滤镜效果
2022/04/11 Python