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 border-radius属性详解
Jul 05 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 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
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
js null undefined 空区别说明
2010/06/13 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
python进阶_浅谈面向对象进阶
2017/08/17 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python实现快递价格查询系统
2020/03/03 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
日本小田急百货官网:Odakyu
2018/07/19 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
大学毕业生个人自荐信范文
2014/01/08 职场文书
缴纳养老保险的证明
2014/01/10 职场文书
妇女工作先进事迹
2014/08/17 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang