借助HTML5 Blob实现文本信息文件下载
原理其实很简单,我们可以将文本或者JS字符串信息借助Blob转换成二进制,然后,作为<a>元素的href属性,配合download属性,实现下载。
代码也比较简单,如下示意(兼容Chrome和Firefox):
var funDownload = function (content, filename) {
// 创建隐藏的可下载链接
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 字符内容转变成blob地址
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
};
其中,content指需要下载的文本或字符串内容,filename指下载到系统中的文件名称。
funDownload(textarea.value, 'test.html');
不止是.html文件,.txt, .json等只要内容是文本的文件,都是可以利用这种小技巧实现下载的。
在Chrome浏览器下,模拟点击创建的<a>元素即使不append到页面中,也是可以触发下载的,但是在Firefox浏览器中却不行,因此,上面的funDownload()方法有一个appendChild和removeChild的处理,就是为了兼容Firefox浏览器。
download属性从Edge13开始支持,理论上,edge也应该支持直接JS触发的浏览器文件下载
借助HTML5 Blob实现文本信息文件下载的更多相关文章
- HTML5实现获取地理位置信息并定位功能
HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用.本文结合实例给大家分享如何使用HTML5,借助百度.谷歌地 ...
- AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能
HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5.百度地图.谷歌地图等三种获取理位置信息并 ...
- Web Scraper 高级用法——利用正则表达式筛选文本信息 | 简易数据分析 17
这是简易数据分析系列的第 17 篇文章. 学习了这么多课,我想大家已经发现了,web scraper 主要是用来爬取文本信息的. 在爬取的过程中,我们经常会遇到一个问题:网页上的数据比较脏,我们只需要 ...
- zx-editor 移动端(HTML5)富文本编辑器,可与原生App混合(hybrid)开发
ZxEditor 移动端HTML文档(富文本)编辑器,支持图文混排.引用.大标题.无序列表,字体颜色.加粗.斜体. 可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发. 源码地址 ...
- Html5 Geolocation获取地理位置信息
Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...
- iOS开发那些事-iOS应用本地化-文本信息本地化
文本信息本地化在本地化工作中占有很大的比例.包括了:应用名称本地化.系统按钮和信息本地化,以及静态文本信息本地化. 系统按钮和信息本地化 还记得天气预报应用背后的“完成”按钮吗,它在中文环境下是“完成 ...
- RichTextBox控件-主要用于输入输出编辑文本信息
1.在RichTextBox控件中添加超链接文字 private void btn_Add_Click(object sender, EventArgs e) { rtbox_HyperLink.Ap ...
- 使用freemaker 导出word 含多张图片,若无图片则显示文本信息
1.使用的Microsoft Office 2007,添加一个无边框的表格,并插入一张图片,最后另存为编码utf-8,一开始保存的word xml格式的,图片的base64编码位于文档最后,暂时没有找 ...
- [日常] Go-逐行读取文本信息
go逐行读取文本信息:1.os包提供了操作系统函数的不依赖平台的接口,Open方法打开一个文件用于读取,func Open(name string) (file *File, err error)2. ...
随机推荐
- 第三百零三节,Django框架介绍——用pycharm创建Django项目
Django框架介绍 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内 ...
- sql字符串的拼接 (字符串和二进制,erlang的mysql驱动)
1> list_to_binary(["select * from aa limit","1",",","97"] ...
- iOS10.0 & Swift 3.0 对于升级项目的建议
iOS & Swift新旧版本更替, 在Apple WWDC大会开始之际, 也迎来了iOS 10.0, Swift 3.0 测试版, 到目前为止, 已经是测试版2.0, 每次更新都带来了新的语 ...
- 监听程序未启动或数据库服务未注册到该监听程序。启动该监听程序并注册数据库服务 然后重新运行 em configuration assistant。
在WIN 7/64Bit上安装ORACLE 11gR2后,管理网页Database Control(如:https://localhost:1158/em)始终登录不进去,总是说密码错误,使用配置工具 ...
- SharePoint 2013 一次性上传文件大小限制
默认是250MB,最大一次上传文件不超过2G The defaut size is 250MB and maximun upload size is 2047MB. It's can't greate ...
- 【转】Internet与Intranet区别
提起Internet,大家都知道它是一个蓬勃发展的国际互联网. 而Intranet则是近两年才发展起来的新事物,通常被称作企业内部网. Internet是一组全球范围内信息资源的名字.这些资源非常巨大 ...
- 运行 3ds Max 时出现的性能问题
运行 3ds Max 时性能减慢或迟缓通常是由于视频配置冲突或内存分配问题引起的.关于性能问题的一大难点在于缩小范围确定问题原因.以下是一些限制 3ds Max 操作的常见情形,以及纠正这 ...
- mybatis之parameterType传递多个参数
当在查询的时候需要传入多个参数的时候该怎么办呢: 1,封装成一个Model对象,底层HashMap还是一个 User user=new User(); user.setUserName("z ...
- UART简介
经常遇到初学者,对单片机串行通讯出了问题不知道如何办的情况.其实最有效的调试方法是用示波器观察收发数据的波形.通过观察波形可以确定以下情况: 1.数据是否接收或发送: 2.数据是否正确: 3.波特率是 ...
- 你知道js当中for循环当中的bug吗,如何解决它
本来以为for循环可以很好的解决一切问题,直到今天遇到了这段代码,刷新了我对for循环的认识,话不多说,直接上代码 var arr = [];for(var i = 0;i<10;i++) { ...