HTML5 的 FileReader 带给我们很强大的文件只读访问能力，可是在 HTML5 新增的 JS 中却没有发现有方便的另存到本地文件的相关 API，以往的办法要么调用浏览器的 save as 命令（兼容程度不详），要么将内容提交到服务器，由服务器附加 content-type: application/octet-stream 头并原文打回来实现。

偶然间，发现 HTML5 的 <a> 标签有了一个新属性，叫 download，取值是一个文件名，当一个带有 download 属性的 <a> 链接被点击时，其形为不再是一个网页跳转，而变成将目标以指定的文件名另存到本地，兼容性还不错的样子。

可是你想啊，<a> 的 href 值是可以随便改的，也就是说要另存的文件内容可以通过 JS 的方式轻松生成，对其指定一个 datauri 就可以决定要保存的文件内容了，配合 base64，甚至可以产生一个二进制文件！

原理简单，实现无比容易，就不在这儿贴代码了，戳我可以看看 live demo。

web 另类方法实现“另存为”功能的更多相关文章

  1. web手工项目02-注册功能输入分析，处理，输出方法-测试用例及缺陷编写-首页轮播图和购物车

    web手工项目第二天笔记 昨日回顾 搭建测试环境(WAMP,phpStudy,tpshop项目文件) 熟悉项目(四个步骤,三个来源) 项目测试流程(需求评审,测试计划与方案,测试用例设计与评审,测试执 ...

  2. 另类方法解决设计Web页面出现:Error Creating Control

    在B/S开发的过程中,经常会遇到这样的提示:Error Creating Control ,而这些页面明明之前是可以打开的,但还是出现如下图所示: 网上找到的方法是把控件初始化放在OnInit里去写, ...

  3. 解密SuperWebview的一种另类方法

    解密SuperWebview的一种另类方法 什么是SuperWebview SuperWebview是APICloud官方推出的另一项重量级API生态产品,以SDK方式提供,致力于提升和改善移动设备W ...

  4. Visual Studio 2010 实用功能:使用web.config发布文件替换功能

    当建立ASP.NET Web应用程序项目后,默认除了生成web.config外,还生成了web.debug.config与Web.Release.config.顾名思义,根据它们的命名我可以推测到他们 ...

  5. (转) Tomcat部署Web应用方法总结

    原文:http://blog.csdn.net/yangxueyong/article/details/6130065 Tomcat部署Web应用方法总结 分类: Java web2011-01-11 ...

  6. 实现Web上的用户登录功能

    关于如何实现web上的自动登录功能 文章来源http://coolshell.cn/articles/5353.html Web上的用户登录功能应该是最基本的功能了,可是在我看过一些站点的用户登录功能 ...

  7. Tomcat部署Web应用方法总结

    转载:http://m.blog.csdn.net/blog/u012516903/15741727 Tomcat部署Web应用方法总结 在Tomcat中部署Java Web应用程序有两种方式:静态部 ...

  8. 你会做Web上的用户登录功能吗？

    Web上的用户登录功能应该是最基本的功能了,可是在我看过一些站点的用户登录功能后,我觉得很有必要写一篇文章教大家怎么来做用户登录功能.下面的文章告诉大家这个功能可能并没有你所想像的那么简单,这是一个关 ...

  9. 解决 SQL 注入的另类方法

    本文是翻译,版权归原作者所有 原文地址(original source):https://bitcoinrevolt.wordpress.com/2016/03/08/solving-the-prob ...

随机推荐

  1. VUE 之 组件

    组件是为了解决页面布局的. 什么是单页面? 答:整个页面的切换都是在这个页面上进行变化的,没有页面的刷新. 1.全局组件 1.1全局组件流程:    1.创建全局组件======>创建一个Vue ...

  2. Aspose 直接插入SQL Server DataTalbe

    原文链接:http://www.cnblogs.com/hellohongfu/p/7362830.html 下面的代码可以根据excel文件,生成创建表的SQL,以及测试InsertSQL .方法将 ...

  3. 织梦系统如何设置URL绝对路径及绝对路径的好处

    今天,和大家分享下织梦系统如何设置URL绝对路径及绝对路径的好处,我的一些就是用的织梦系统,感觉织梦在SEO优化方面做的还是非常好的,至少在CMS系统中应该是做的最出色的吧!下面,我就先来讲下这个织梦 ...

  4. IDEA下搭建简单的SpringBoot工程应用

    (1)File->new,选择maven,创建一个空项目,直接next. (2)填写工程名,next. (3)填写项目名,next,创建一个基于maven的空Java项目. (4)在pom文件中 ...

  5. ubuntu下tesseract 4.0安装及参数使用

    tesseract是一个开源的OCR引擎,最初是由惠普公司开发用来作为其平板扫描仪的OCR引擎,2005年惠普将其开源出来,之后google接手负责维护.目前稳定的版本是3.0.4.0版本加入了基 ...

  6. CodeForces242D：Connected Components （不错的并查集）

    We already know of the large corporation where Polycarpus works as a system administrator. The compu ...

  7. rsync(二)：inotify+rsync详细说明和sersync

    以下是rsync系列篇: inotify+rsync 如果要实现定时同步数据,可以在客户端将rsync加入定时任务,但是定时任务的同步时间粒度并不能达到实时同步的要求.在Linux kernel 2. ...

  8. Java Container ***

    Java Container ArrayList 和Vector是采用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,都允许直接序号索引元素,但是插入数据要设计到数组元素移动等内存 ...

  9. MariaDB + Visual Studio 2017 环境下的 ODBC 入门开发

    参考: Easysoft公司提供的ODBC教程 微软提供的ODBC文档 环境: Windows 10 x64 1803 MariaDB TX 10.2.14 x64 MariaDB ODBC Conn ...

  10. liteos内存（三）

    1. 概述 1.1 基本概念 内存管理模块管理系统的内存资源,它是操作系统的核心模块之一.主要包括内存的初始化.分配以及释放. 在系统运行过程中,内存管理模块通过对内存的申请/释放操作,来管理用户和O ...