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 box-sizing属性
Apr 17 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 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
ajax在joomla中的原生态应用代码
2012/07/19 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
javascript中的window.location.search方法简介
2013/09/02 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
JavaScript中0和""比较引发的问题
2016/05/26 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
Python tkinter实现日期选择器
2021/02/22 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
食堂标语大全
2014/06/11 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
运动会入场词
2015/07/18 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang