使用JavaScript保存文本文件到本地的两种方法

一段使用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="https://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>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接

赞 (0)

相关推荐

  • JavaScript继承与聚合实例详解

    JavaScript继承与聚合实例详解

    本文实例讲述了JavaScript继承与聚合.分享给大家供大家参考,具体如下: 一.继承 第一种方式:类与被继承类直接耦合度高 1. 首先,准备一个可以被继承的类(父类),例如 //创建一个人员类 function Person(name) {//现在Person里面的域是由Person里面的 来this来控制的 this.name=name; } 2. 然后,有个需要继承父类的子类 function Teacher(name,books) { Person.call(this,name);//

  • JavaScript中的回调函数实例讲解

    在JS中,函数可以作为参数传递给函数,不止可以传递值或者对象,案例如下: 定义: /** *@project: data_overnance *@package: *@date:2018/11/30 0030 15:07 *@author 郭宝 *@brief: 回调函数 */ export default class Person { constructor(){ } /** * 设置名称 * @param nameCallback 传入回调函数 */ setName(nameCallback

  • 使用javascript做时间倒数读秒功能的实例

    某个试卷在线考试需要读秒.网上找了一会就是没找到我想要的.只好自己改改网上的,这也用用,那也用用. 其他代码不贴了.贴相关的: html页面代码: <a class="btn btn-default" onclick="StartExamine();">开始</a> <div id="TimeClock" class="col-md-4" ><span class="text

  • JavaScript中的"=、==、==="区别讲解

    = 是赋值运算,== 用于一般比较,=== 用于严格比较 == 在比较的时候可以转换数据类型: === 严格比较,只要类型不匹配就返回flase. 举例说明: "1" == true 类型不同,"=="将先做类型转换,把true转换为1,即为 "1" == 1: 此时,类型仍不同,继续进行类型转换,把"1"转换为1,即为 1 == 1: 此时,"==" 左右两边的类型都为数值型,比较成功! 如果比较:&qu

  • javascript json字符串到json对象转义问题

    在使用JavaScriptSerializer.Serialize 方法转json对象时,遇到一个问题,后台方法生成的json字符串中有没有转义的特殊字符代码: 而这些特殊的代码在使用javascript的转json对象方法时报错,为了讲这个转义的东西转义过来,折腾了半天.着实对javascript无语: 后台代转的对象是 Dictionary<string,string> DepartmentsExistTaskCounts 前台页面使用的MVC里的razor 写法,直接使用后台方法把数据转

  • Javascript迭代、递推、穷举、递归常用算法实例讲解

    累加和累积 累加:将一系列的数据加到一个变量里面.最后的得到累加的结果 比如:将1到100的数求累加和 小球从高处落下,每次返回到原来一半,求第十次小球落地时小球走过的路程 <script> var h=100; var s=0; for(var i=0;i<10;i++){ h=h/2; s+=h; } s=s*2+100; </script> 累积:将一系列的数据乘积到一个变量里面,得到累积的结果. 常见的就是n的阶乘 var n=100; var result= 1;

  • JavaScript使用Math.random()生成简单的验证码

    第一种:单纯的纯数字验证码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js验证码</title> </head> <body> <div class="yzm" style="width: 20%;height: 300px;text-al

  • JavaScript格式化json和xml的方法示例

    本文实例讲述了JavaScript格式化json和xml的方法.分享给大家供大家参考,具体如下: 格式化json实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js格式化json的方法</title> </head> <body> <!--格式化后的json写入的位

  • JavaScript两种计时器的实例讲解

    通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.我们称之为计时事件.提供了两种计时器的方法如下: window.setInterval(): 这个方法就是在一个周期内反复执行一直到窗口关闭或者 clearInterval() window.setTimeout(); 延迟执行内容 setInterval()的使用方法: setInterval(code,millisec); code:可以是方法名,如果是方法不要加小括号.同时也可以

  • JavaScript之解构赋值的理解

    JavaScript之解构赋值的理解

    1. ES6的新特性 允许将对象或者数组'分解'成多个单独的值, 以对象的解构开始. 代码示例 2. 说明 1).  定义一个对象 const obj={b:2,c:3,d:4}; 此时系统中没有变量b, 变量c与变量d 2). 开始解构该对象, const {a,b,c} = obj 这句话的意思是, 定义a,b,c三个变量, 然后在obj对象中寻找a,b,c变量, 如果找到, 则赋值给对应的变量 所以, a, 已定义, 但是未赋值. 定义是在const{a,b,c}中定义的, 而没有在obj

随机推荐