H5-BLOB
BLOB 对象为h5的产物。普遍用于传输或者存储数据。
<a 标签的新属性 download 表明 此a标签点击后,不是href跳转而是要下载。download的内容表示下载文件名。但是目前部分浏览器不支持。
以下为blob的支持:

a标签download属性支持:

基本写法如下:
<script type="text/javascript">
/**
* 前端下载BLOB (blob:file/*****)
*/
var download = function(){
var opt = {
type: "text/plain", // mime type
endings: "native" // transparent表示\n为一般字符非回车符
};
var blob = new Blob(['张三李四\n王麻子'], opt);
var size = blob.size;
var type = blob.type;
//blob.slize(); 文件切割
//Blob.webkitSlice(); webkit 内核用
//blob.mozSlice(); moz 内核用
var a = document.createElement('a');
// download判断
var blobUrl = URL.createObjectURL(blob); // 创建对象
if('download' in a){
alert("support")
a.download = "test.txt";
a.href = blobUrl;
a.target= "_blank";
a.innerHtml = "DOWNLOAD";
a.click();
}
URL.revokeObjectURL(); // 清除对象
}(); </script>
不过目前在移动端不是很好的支持Blob。还得需要从后台获取下载。
H5-BLOB的更多相关文章
- 从web图片裁剪出发:了解H5中的Blob
刚开始做前端的时候,有个功能卡住我了,就是裁剪并上传头像.当时两个方案摆在我面前,一个是flash,我不会.另一个是通过iframe上传图片,然后再上传坐标由后端裁剪,而我最终的选择是后者.有人会疑惑 ...
- Java 使用blob对H5视频播放进行加密《java视频加密》
1.创建一个H5 <video>标签 <video id="sound" type="video/mp4" controls="co ...
- 前端/H5/JS:通过URL下载文件并转存到其他服务器(微信),Blob文件转File文件
现在有一个图片URL,在自己服务器上,一个微信提供的媒体文件上传URL,我在前端通过JS实现转存微信服务器 1. http://file.xxx.com/asd.jpg 自己的 2.https://a ...
- 前端H5中JS用FileReader对象读取blob对象二进制数据,文件传输
HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...
- 用H5中的Canvas等技术制作海报
在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...
- h5移动端常见问题
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 1 <meta name="viewport" content="width=device-w ...
- H5 缓存机制浅析 移动端 Web 加载性能优化
腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...
- 项目分享五:H5图片压缩与上传
一.简介 图片的压缩与上传,是APP里一个很常用的功能.我们来年看 ChiTuStore 是怎样做的.相关文件 App/Module/User/UserInfo.html,App/Module/Use ...
- 解惑好文:移动端H5页面高清多屏适配方案 (转)
转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...
- angular下H5上传图片(可多张上传)
最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决 angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西. 1.ng-f ...
随机推荐
- RAC6——crsctl 和 srvctl 命令的区别理解
Oracle Clusterware提供了丰富的工具,我们把常用的工具按照rac的四层机构做了划分,然后分别介绍: 节点层: olsnodes 参数-n -i -p 网络层: oifcfg 四个子命令 ...
- 设置zedgraph鼠标拖拽和局部放大属性(转帖)
说一下几个属性的意义和具体应用: (1)鼠标拖拽显示区域 PanModifierKeys ->> Gets or sets a value that determines which mo ...
- phper必知必会(一)
1.http返回状态 200:成功,服务器已经成功处理了请求,并正常返回了提供请求的网页 301:永久移动,服务器会将请求转移到新的服务器地址 302:临时移动 401:未授权请求,请求需要身份移动 ...
- WF4.0 基础篇 (一)开始使用WF
来源:https://www.cnblogs.com/caosenianhuan/p/WF.html 最近公司要重新上线一套新的CRM系统,要重整老系统里的业务流模块,团队讨论已微软的workflow ...
- gdb 调试(查看运行时数据) 四
在使用GDB调试程序时,触发断点后,可以使用print命令(简写为p),或是同义命令inspect来查看当前程序的运行数据.print命令的格式是: print <expr> pri ...
- WifiMonitor的事件发放
Wifi框架中WifiMonitor负责上报wpa_supplicant的消息给WifiStateMachine,WifiNative负责将WifiStateMachine的消息下发给wpa_supp ...
- windows基础应用(word)
自动编号-最后选择一下编号格式 TAB 进入子节 shift+TAB 回退到父节 取消邮箱/网址链接 ctrl+z word中输入不认识生僻字:输入偏旁部首王,选中插入中寻找 输入英文时,更改大小写/ ...
- 一次JVM内存调整
单台服务器8G内存,2核 系统里装了redis, rocketmq, mysql, zookeeper, 还有20个左右的微服务,每个微服务的jvm 参数 -Xms128m -Xmx256m -Xmn ...
- java.lang.ClassNotFoundException: org.I0Itec.zkclient.exception.ZkNoNodeException 异常 如何处理
严重: Context initialization failed java.lang.NoClassDefFoundError: org/I0Itec/zkclient/exception/ZkNo ...
- 运行quectel EC20 module example data
environment setting are as below: 1. ubuntu 14.04, linux kernel 4.4,OpenLinux(QuecLinux) 2. module: ...