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中的calc()功能
Jul 14 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 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
PHP开发的一些注意点总结
2010/10/12 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
js实现选项卡效果
2020/03/07 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
python安装教程 Pycharm安装详细教程
2017/05/02 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
某公司面试题
2012/03/05 面试题
幼儿园户外活动总结
2014/07/04 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
运动会开幕词
2015/01/28 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
2019个人工作总结
2019/06/21 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript