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的更多相关文章

  1. 从web图片裁剪出发:了解H5中的Blob

    刚开始做前端的时候,有个功能卡住我了,就是裁剪并上传头像.当时两个方案摆在我面前,一个是flash,我不会.另一个是通过iframe上传图片,然后再上传坐标由后端裁剪,而我最终的选择是后者.有人会疑惑 ...

  2. Java 使用blob对H5视频播放进行加密《java视频加密》

    1.创建一个H5 <video>标签 <video id="sound" type="video/mp4" controls="co ...

  3. 前端/H5/JS:通过URL下载文件并转存到其他服务器(微信),Blob文件转File文件

    现在有一个图片URL,在自己服务器上,一个微信提供的媒体文件上传URL,我在前端通过JS实现转存微信服务器 1. http://file.xxx.com/asd.jpg 自己的 2.https://a ...

  4. 前端H5中JS用FileReader对象读取blob对象二进制数据,文件传输

    HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...

  5. 用H5中的Canvas等技术制作海报

    在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...

  6. h5移动端常见问题

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 1 <meta name="viewport" content="width=device-w ...

  7. H5 缓存机制浅析 移动端 Web 加载性能优化

    腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...

  8. 项目分享五:H5图片压缩与上传

    一.简介 图片的压缩与上传,是APP里一个很常用的功能.我们来年看 ChiTuStore 是怎样做的.相关文件 App/Module/User/UserInfo.html,App/Module/Use ...

  9. 解惑好文:移动端H5页面高清多屏适配方案 (转)

    转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...

  10. angular下H5上传图片(可多张上传)

    最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决 angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西. 1.ng-f ...

随机推荐

  1. leetcode:Pascal's Triangle【Python版】

    1.这道题一次提交就AC了: 2.以前用C语言实现的话,初始化二维数组全部为0,然后每行第一个元素为1,只需要用a[i][j] = a[i-1][j]+a[i-1][j-1]就可以了: 3.在Pyth ...

  2. 转 Apache Kafka:下一代分布式消息系统

    简介 Apache Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为Apache项目的一部分.Kafka是一种快速.可扩展的.设计内在就是分布式的,分区的和可复制的提交 ...

  3. C语言写CGI程序

    一.CGI概述 CGI(公用网关接口)规定了Web服务器调用其他可执行程序(CGI程序)的接口协议标准.Web服务器通过调用CGI程序实现和Web浏览器的交互, 也就是CGI程序接受Web浏览器发送给 ...

  4. nginx 配置 vhosts 的方案

    网上有很多种 nginx 配置 vhosts,来个比较方便的. 步骤如下: 在 conf 目录建一个vhosts 目录. 在 nginx.conf 末尾加入 include vhosts/*.conf ...

  5. yii 获取当前模块名、控制器名 、动作名

    yii1 1. 获取控制器名 在控制器中获取控制器名: $name = $this->getId(); 在视图中获取控制器名: $name = Yii::app()->controller ...

  6. bzoj2458 最小三角形

    Description Xaviera现在遇到了一个有趣的问题.平面上有N个点,Xaviera想找出周长最小的三角形.由于点非常多,分布也非常乱,所以Xaviera想请你来解决这个问题.为了减小问题的 ...

  7. windows下Nginx反向代理服务器安装与配置

    感谢慕课网Geely老师的讲解,本人将Nginx进行如下的总结. Nginx是一款轻量级的Web服务器,也是一款反向代理服务器,其主要特点:高稳定, 高性能,资源占用少功能丰富,模块化结构 支持热部署 ...

  8. 【H3C交换机】cpu各个进程的详细说明

    display cpu-usage命令用来查看设备CPU占用率的统计信息,以及各个进程的cpu占用率. 各个进程详细说明如下,不同软件版本.盒式和框式的cpu进程略有不同,详细信息可以查看手册中的命令 ...

  9. [UE4]添加蒙太奇动画

    选择蒙太奇所使用的骨骼

  10. flume系统使用以及与storm的初步整合

      Flume NG的简单使用可以参考介绍文档:http://blog.csdn.net/pelick/article/details/18193527,图片也来源此blog:       下载完fl ...