<!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. 防火墙上开放Oracle服务端口1521的方法

    近来由于工作需要,在Windows XP平台上安装了Oracle9i数据库作为测试之用,一切正常.但当客户机连接服务器时却总是超时,我首先想到了防火墙,当我打开1521端口时,连接操作仍然失败.我又怀 ...

  2. 全景智慧城市常诚——一个实体商家“自剖”VR全景的势在必得

    谈起"智慧城市",你的心中是否充满了期待?随着互联网的发展,人们对于"智慧城市"的需求越来越迫切.现在想想,我也算是首批入驻全景智慧城市的商家之一了.在各种连锁 ...

  3. nginx安装文档

    1.   安装依赖包 yum -y install pcre-devel yum -y install openssl-devel yum -y install gcc yum -y install ...

  4. JavaBean在jsp中的使用

    JavaBean在Jsp中的引用: 1.用<jsp:useBean>标记: <jsp:useBean id="name" class="classnam ...

  5. ionic2 tabs使用自定义图标

    在ionic2中图标是通过类添加的 比如说   tabIcon="homeImg" 在页面中研究可以看到在ios上有一个类是 .ion-ios-homeImg:before 所以我 ...

  6. Nginx——在Windows环境下安装

    下载 Nginx是开源软件,用户可以访问 http://nginx.org/ 网站获取源码包或Windows二进制文件下载.其中1.13.x版本为开发版本,1.12.0版本为稳定版本.开发版本分支会较 ...

  7. mysqldump 用法总结

    mysqldump 备份 备份数据库 my_database $ mysqldump -uUSER -pPASSWD my_database > my_database.sql 备份数据库 my ...

  8. BOM API

    原文链接http://www.jb51.net/article/55851.htm 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具 ...

  9. Go - concurrency

    并发 vs 并行 首先,我们先来搞清楚概念以及并发和并行的区别. 并发 - 利用时间片切换来实现“同时”运行的. 并行 - 利用CPU的多核来实现通过多线程来实现同时运行. Go 语言的设计理念就是通 ...

  10. 给js动态创建的对象绑定事件

    1.使用原生JS动态为动态创建的对象绑定事件 1-1.创建一个function,用来兼容IE8以下浏览器添加事件 function addEvent(el, type, fn) {  if(el.ad ...