<!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">

<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="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>

简单好用用js就可以保存文本文件到本地的更多相关文章

  1. [JavaScript] js实现保存文件到本地

    function fake_click(obj) { var ev = document.createEvent("MouseEvents"); ev.initMouseEvent ...

  2. 搭建一个简单的node.js服务器

    第一步:安装node.js.可以去官网:https://nodejs.org/en/进行下载. 查看是否成功,只需在控制台输入 node -v.出现版本号的话,就证明成功了. 第二步:编写node.j ...

  3. LayaAir引擎开发HTML5最简单教程(面向JS开发者)

    LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结 一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦 切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...

  4. 用简单的 Node.js 后台程序浅析 HTTP 请求与响应

    用简单的 Node.js 后台程序浅析 HTTP 请求与响应 本文写于 2020 年 1 月 18 日 我们来看两种方式发送 HTTP 请求,一种呢,是命令行的 curl 命令:一种呢是直接在浏览器的 ...

  5. php中关于js保存文件至本地的问题

    最近在搞一个livezilla的在线客服聊天的东东,客户界面要求添加一个下载聊天记录的功能.于是我就是翻看了下网上的各种关于”js保存文件至本地“的资料,发现只能在IE下通过execCommand实现 ...

  6. [转]PROC简单使用用例－－VC连接ORACLE

    [转]PROC简单使用用例--VC连接ORACLE 操作系统:windows 7 数据库版本:oracle 10g VS版本:VS2010 前言:连接ORACLE的方式有很多,此处仅以PROC为例,说 ...

  7. 极其简单的用JS在浏览器中创建下载文件的方法

    有这样一个需求,在js中动态创建一个页面,然后下载该页面为word文档,研究了一上午,最后发现实现起来如此简单. 在js中创建如下方法:(直接复制即可) function downloadFile(f ...

  8. 一段简单的顶部JS广告

    一段简单的顶部JS广告 <SCRIPT LANGUAGE="JavaScript"> ; ; images = new Array; images[] = new Im ...

  9. js 判断是否可以打开本地软件

    js判断时候可以打开本地的软件或者插件 点击一个按钮,打开本地的软件,比如问题反馈,需要调起本地的邮箱,填入一些信息. 这个功能<a>标签有提供支持,但是如果本地没有安装邮箱,则无法打开, ...

随机推荐

  1. Java之FilenameFilter接口

    FilenameFilter接口:是用于过滤文件的 要实现的是accept方法 实例代码: 1,匿名类实现FilenameFilter-–过滤指定类型文件 package File类过滤器; impo ...

  2. Promise实现多图预加载

    Promise正如它的中文意思“承诺”一样,保存着未来会发生事件(一般为异步操作).Promise避免了“回调地狱”,写法更加接近同步操作.说到同步,我更加喜欢async.await,它们书写更贴近同 ...

  3. awk内引用shell变量【自己手动加精】

    题目 [root@localhost ~]# cat 1.txt iii sss ddd 执行命令 [root@localhost ~]# A=0 [root@localhost ~]# awk '{ ...

  4. Lucene全文搜索之分词器：使用IK Analyzer中文分词器（修改IK Analyzer源码使其支持lucene5.5.x）

    注意:基于lucene5.5.x版本 一.简单介绍下IK Analyzer IK Analyzer是linliangyi2007的作品,再此表示感谢,他的博客地址:http://linliangyi2 ...

  5. Spring学习（10）--- @Qualifier注解

    按类型自动装配可能多个bean实例的情况,可以使用Spring的@Qualifier注解缩小范围(或指定唯一),也可以指定单独的构造器参数或方法参数 可用于注解集合类型变量 例子: package c ...

  6. RabbitMQ分布式消息队列服务器（一、Windows下安装和部署）

    RabbitMQ消息队列服务器在Windows下的安装和部署-> 一.Erlang语言环境的搭建 RabbitMQ开源消息队列服务是使用Erlang语言开发的,因此我们要使用他就必须先进行Erl ...

  7. angular嵌入注入服务实例

    <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <met ...

  8. 解决（防止）DDOS攻击的另一种思想

    本方案适合作最后的处理方案. 在服务器遭到DDOS攻击后,防火墙.高防盾或者其他的方案都已经失去了效力,这时运维人员无任何方案可以处理,并且只能任由DDOS攻击或关闭服务器时,该方案可以有限的抵挡大部 ...

  9. thinkphp中find()和select()的区别

    1.find()是查找符合条件的第一条数据,返回的是一个一维数组: select()是查找符合条件的所有的数据,返回的是一个二维数组: 2.以下案例 $tech=M('techlevel','HR_C ...

  10. ubuntu16.04-x64系统中Jexus web server部署.NetCore和端口分析引发的猜想！

    您有这样的牢骚么? 有一周没更新博客了,简单说下在干什么吧:主要是公司安排对接某旅游大公司的接口,接口数量倒也就10个左右,对接完后还需要加入到业务系统中和App端,因此还是需要花点时间的:时间上来说 ...