HTML5 Blob 实现文件下载功能的示例代码


Posted in HTML / CSS onNovember 29, 2019

原理其实很简单,就是将文本或者JS字符串信息(即后台返回来的在服务器上没有具体路径的动态文件,如导出数据功能)借助Blob转换成二进制,然后,作为 a 标签的 href 属性,配合download属性,实现下载功能,缺点是如果文件太大会下载失败。

下面是导出数据的一个实例:

$("#exportAll").on("click",function(){     //点击【全部导出】
    //layer.load();
    var province = $('#operatingData select[name=\'province\'] option:selected').val();  //查询条件(省)
    var city = $('#operatingData select[name=\'city\'] option:selected').val();    //查询条件(市)

    var url = '/xxx/excelAllDownload';      //【全部导出】请求url
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.responseType = "blob";   //返回类型blob
    xhr.onload = function () {   //定义请求完成的处理函数
        //layer.closeAll('loading');
        if (this.status === 200) {
            var blob = this.response;
            var reader = new FileReader();
            reader.readAsDataURL(blob);   // 转换为base64,可以直接放入a标签href
            reader.onload = function (e) {
                var a = document.createElement('a');   // 转换完成,创建一个a标签用于下载
                a.download = 'XX数据.xlsx';
                a.href = e.target.result;
                $("body").append(a);    // 修复firefox中无法触发click
                a.click();
                $(a).remove();
            }
        }else if(this.status === 504){
            alert('导出失败,请求超时');
            //layer.msg('导出失败,请求超时', {icon: 2});
        }else{
            alert('导出失败');
            //layer.msg('导出失败', {icon: 2});
        }
    };
    xhr.send("province=" + province + "&city=" + city);
})

上面是在服务器动态生成excel文件时使用的下载方式,因为对应的 URL 并不存在,我们就不能简单的指定 href 属性。

但是不同浏览器对 Blob (类文件对象)有不同的大小限制,这种借助Blob转换成二进制 实现下载功能的方式并不能导出数据量过多的数据到excel文件(即不能下载太大的文件),且有兼容性问题。

HTML5 Blob 实现文件下载功能的示例代码

所以,我们可以通过 JavaScript 对服务器发出一个请求,通知它去生成某个文件,然后把对应的 URL 返回给客户端。代码如下:(此时的请求结果为一个已经存在于服务器上面的静态文件的路径)

$("#exportAll").on("click",function(){     //点击【全部导出】
    var url = '/xxx/excelAllDownload';     //【全部导出】请求url
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.responseType = "blob";   //返回类型blob
    xhr.onload = function () {   //定义请求完成的处理函数
        if (this.status === 200) {
            //方式一实现静态文件下载,不能自定义下载文件名字
            //location.href = "json/abc.xlsx";  //this.response(返回的服务器上的静态文件路径)

            //方式二实现静态文件下载,可以自定义下载文件名字
            var a = document.createElement('a');  //创建a标签用于下载
            a.download = 'XXX数据.xlsx';
            a.href = "json/abc.xlsx";  //this.response(返回的服务器上的静态文件路径)
            $("body").append(a);       // 修复firefox中无法触发click
            a.click();
            $(a).remove();
        }else if(this.status === 504){
            alert('导出失败,请求超时');
        }else{
            alert('导出失败');
        }
    };
    xhr.send();
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 #HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 #HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 #HTML / CSS
HTML5 weui使用笔记
Nov 21 #HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 #HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 #HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 #HTML / CSS
You might like
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
提高php编程效率技巧
2015/08/13 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
基于node.js的快速开发透明代理
2010/12/25 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
Javascript的闭包详解
2014/12/26 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
Python探索之ModelForm代码详解
2017/10/26 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
python获取栅格点和面值的实现
2020/03/10 Python
Python中常见的数制转换有哪些
2020/05/27 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
《和田的维吾尔》教学反思
2014/04/14 职场文书
优质服务演讲稿
2014/05/14 职场文书
民间借贷借条范本
2015/05/25 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
Python基础学习之奇异的GUI对话框
2021/05/27 Python