<!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. vmware和centOS的安装

    如果勾上了,会立即在本机开辟20g的空间,需要很长时间 选择电脑中ISO镜像的位置,之后点击开启虚拟机! 这个密码是root用户的密码!管理员密码! 可以选择我们的Minimal没有界面的!

  2. PHP基础入门（二）---入门必备哦！

    前言 在上一章中,我们初步了解了PHP的网页基础和PHP的入门基础,今天继续给大家分享更多有关PHP的知识. 理论知识看起来可能比较枯燥一些,但是我们的实践(敲代码)毕竟离不开它. 只有理论与实践相结 ...

  3. java(3) if结构

    一.基本if结构 1.流程图 1)输入输出 2)判断和分支 3) 流程线 1.1  简单的if条件判断 if(表达式){             //表达式为true,执行{}中的代码 } 示例1:如 ...

  4. 详解npm的模块安装机制 --社会我npm哥，好用话不多

      依赖树表面的逻辑结构与依赖树真实的物理结构 依赖树表面的逻辑结构与依赖树真实的物理结构并不一定相同! 这里要先提到两个命令:tree -d(linux)和npm ls(npm) 在一个npm项目下 ...

  5. MVC4加载zTree树小控件

    前言: 第一次学习使用MVC框架,找了个练手项目,加载zTree树小控件.下面我就一步步说明我这次练手的经历以记录.如果有什么错误,希望各位大神帮忙指正,谢谢. 第一步: 利用VS2010新建一个MV ...

  6. 谈谈this对象

    通过平常的使用简单总结了一下不同形式的函数调用下this的指向,函数的调用形式决定了this的指向.就简单分析一下以下几种情况: 情况一:纯粹的函数调用 eg: var x=1; function f ...

  7. 深入探索C++对象模型(六)

    执行期语意学(Runtime Semantics) 对象的构造和析构(Object Constructor and Destructor) 一般而言,constructor和destructor的安插 ...

  8. Python的核心数据结构

    数据结构 例子 数字 1234,3.1415,3+4j 字符串 'spam'."grace's" 列表 [1,[2,'three'],4] 字典 {'food':'spam','t ...

  9. HTML标签类型及特点

    关键词:块级元素  行级元素 行内块元素   一. 概述           HTML(Hyper Text Markup Language )作为一种标记语言,网页所有的内容均书写在标签内部,标签是 ...

  10. easygen通用代码生成框架[开源]

    什么东东 用过mybatis的同学都知道,手工写mapper和xml是一件很痛苦的事儿,幸好官方提供了Mybatis-Generator,但是这家伙生成的东西不开放不方便修改,而且项目中的代码生成需求 ...