<!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. Spring Boot的properties配置文件读取

    我在自己写点东西玩的时候需要读配置文件,又不想引包,于是打算扣点Spring Boot读取配置文件的代码出来,当然只是读配置文件没必要这么麻烦,不过反正闲着也是闲着,扣着玩了.具体启动过程以前的博客写 ...

  2. 修改tomcat图标

    页面上加入: 1 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon ...

  3. 可视化之AQICN

    上一篇和大家分享了<可视化之Berkeley Earth>,这次看一看下面这个网站---aqicn.org.先做一个提示:文末有惊喜~ 该网站在中国有一定的权威性,PM2.5数据有一点敏感 ...

  4. 微信公众平台开发实战Java版之如何网页授权获取用户基本信息

    第一部分:微信授权获取基本信息的介绍 我们首先来看看官方的文档怎么说: 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权回调域 ...

  5. fetch()的用法

    发起获取资源请求的我们一般都会用AJAX技术,最近在学习微信小程序的时候,用到了fetch()方法. fetch()方法用于发起获取资源的请求.它返回一个promise,这个promise会在请求响应 ...

  6. Rails核心组件

    Action Pack 包含Action Controller,Action View,Action Dispatch 封装了MVC的VC功能 Action Mailer 开发电子邮件服务的框架 Ac ...

  7. Ubuntu下安装并配置VS Code编译C++

    作者:tongqingliu 转载请注明出处:http://www.cnblogs.com/liutongqing/p/7069091.html Ubuntu下安装并配置VS Code编译C++ 安装 ...

  8. MYSQL数据类型和where条件判断

    MySQL中常见的数据类型 一.字符型 ① CHAR(N):固定N个字符长度的字符串,如果长度不够自动空格补齐; N的范围 0~255 ② VARCHAR(N): 存储可变长度的字符串,最常用 ③ T ...

  9. 初学MySQL

    MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.   Mysql默认端口号: 3306 超级用户:root   prompt 修改提示符. ( ...

  10. 【Android Developers Training】 14. 序言：管理Activity生命周期

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...