<!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. 封装TableView有可能用到的数据结构和UITableViewCell的一个继承类

    最近4年的时间,我已经做了5个App完全独立开发, 工作经历5个App, 维护了两个App. 在这期间用的最多的是UITableView, 因此也有许多感觉可以封装的. 现在就是我封装的. RXCel ...

  2. 用hmmlearn学习隐马尔科夫模型HMM

    在之前的HMM系列中,我们对隐马尔科夫模型HMM的原理以及三个问题的求解方法做了总结.本文我们就从实践的角度用Python的hmmlearn库来学习HMM的使用.关于hmmlearn的更多资料在官方文 ...

  3. Chapter 9:Noise-Estimation Algorithms

    作者:桂. 时间:2017-06-14  12:08:57 链接:http://www.cnblogs.com/xingshansi/p/6956556.html 主要是<Speech enha ...

  4. Bash提示符

    Bash有四种提示符 1.基本提示符(PS1):即$符号,是默认的基本提示符,当Shell运行在交互模式下时,该提示符会出现在屏幕上,可以设置为其它符号. 显示PS1设置[cb@cb:16:36:23 ...

  5. 关于HTML学习整理（一）

    新人,自己整理,第一次发,以后慢慢整理,欢迎指点,那些链接怎么做的,希望有人告知一下,谢谢! HTML页面写法,标签成对出现,可嵌套使用 <html> <head> <t ...

  6. jQuery – 鼠标经过(hover)事件的延时处理

    一.关于鼠标hover事件及延时 鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处 ...

  7. 【知识整理】这可能是最好的RxJava 2.x 入门教程（二）

    这可能是最好的RxJava 2.x入门教程系列专栏 文章链接: 这可能是最好的RxJava 2.x 入门教程(一) GitHub 代码同步更新:https://github.com/nanchen22 ...

  8. php中引用&的一个小实例

    在百度知道上碰到一段关于php的引用符&的代码,对于初学都来说还是很考验理解分析能力的,把代码和自己的分析贴上来作一个备份,也与大家共勉. 代码片段: $arr =array(1,2,3,4) ...

  9. PHP完成一个日历

    今天我们就用php中的数组合date 做一个日历. 先让我们回顾一下PHP里面的date . 1.时间戳:表示从计算机元年/UNIX纪年(0时区 1970/1/1 00:00:00)到当前事件的秒数. ...

  10. Linux编程之select

    select系统调用的的用途是:在一段指定的时间内,监听用户感兴趣的文件描述符上可读.可写和异常等事件. select 机制的优势 为什么会出现select模型? 先看一下下面的这句代码: int i ...