文档章节

ajax请求二进制流进行处理(ajax异步下载文件)

张豪飞
 张豪飞
发布于 2017/08/30 10:19
字数 589
阅读 2739
收藏 111

需求

  • 管理后台需要随时下载数据报表,数据要实时生成后转换为excel下载。
  • 文件不大,页面放置“导出”按钮,点击按钮后弹出保存文件对话框保存

说明:第一种方法使用a标签直接可以满足大部分人需求,第二种方法纯粹是在说实现方法以及更好的操作体验,不需要(举一个需要第二种方法的例子:如果生成很慢就需要生成过程中禁用按钮,防止连续生成)用到的可以不用看

解决方案

方法一

请求文件的接口能改为GET则可以使用这种方法

<a  class="btn btn-primary btn-xs" download="data.xlsx" href="download/?filename=aaa.txt"><i class="fa fa-share-square-o fa-lg"></i> 导出</a>

或者变换一种方式,使用js动态创建a标签

<button type="button"  onclick="download()">导出</button>
function download() {
    var a = document.createElement('a');
    var url = 'download/?filename=aaa.txt';
    var filename = 'data.xlsx';

    a.href=url;
    a.download = filename;
    a.click()
 }

缺点

  1. 不能使用post方法
  2. 不能在启动下载时禁用按钮、下载完毕启用按钮

方法二

错误方式

常规方法,使用jquery:

<button type="button"  onclick="download()">导出</button>
function download() {
    var url = 'download/?filename=aaa.txt';
    $.get(url, function (data) {
        console.log(typeof(data))
        blob = new Blob([data])
        var a = document.createElement('a');
        a.download = 'data.xlsx';
        a.href=window.URL.createObjectURL(blob)
        a.click()
    })
}

这种方式保存的文件是不能打开的,console.log(typeof(data))会看到是string类型,原因是jquery将返回的数据转换为了string,不支持blob类型。

正确方式

<button type="button"  onclick="download()">导出</button>
function download() {
    var url = 'download/?filename=aaa.txt';
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);        // 也可以使用POST方式,根据接口
    xhr.responseType = "blob";    // 返回类型blob
    // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
    xhr.onload = function () {
        // 请求完成
        if (this.status === 200) {
            // 返回200
            var blob = this.response;
            var reader = new FileReader();
            reader.readAsDataURL(blob);    // 转换为base64,可以直接放入a表情href
            reader.onload = function (e) {
                // 转换完成,创建一个a标签用于下载
                var a = document.createElement('a');
                a.download = 'data.xlsx';
                a.href = e.target.result;
                $("body").append(a);    // 修复firefox中无法触发click
                a.click();
                $(a).remove();
            }
        }
    };
    // 发送ajax请求
    xhr.send()
}

参考资料

受该文章启发 http://www.cnblogs.com/cdemo/p/5225848.html

© 著作权归作者所有

共有 人打赏支持
张豪飞
粉丝 27
博文 36
码字总数 19506
作品 0
郑州
程序员
私信 提问
加载中

评论(12)

你知道啥
你知道啥
这个方法为什么在IE上不能够使用呢?
张豪飞
张豪飞

引用来自“生吃番茄酱”的评论

引用来自“LiShixi”的评论

作者原话:
第二种方法纯粹是在说实现方法以及更好的操作体验,不需要(举一个需要第二种方法的例子:如果生成很慢就需要生成过程中禁用按钮,防止连续生成)用到的可以不用看

如果文件很大,,,浏览器会不会爆炸。。
是的,单纯这样简单是不适合大型文件的
Aschrius
Aschrius

引用来自“LiShixi”的评论

作者原话:
第二种方法纯粹是在说实现方法以及更好的操作体验,不需要(举一个需要第二种方法的例子:如果生成很慢就需要生成过程中禁用按钮,防止连续生成)用到的可以不用看

如果文件很大,,,浏览器会不会爆炸。。
LiShixi
LiShixi
作者原话:
第二种方法纯粹是在说实现方法以及更好的操作体验,不需要(举一个需要第二种方法的例子:如果生成很慢就需要生成过程中禁用按钮,防止连续生成)用到的可以不用看
S_U_D
S_U_D

引用来自“张豪飞”的评论

引用来自“gs586169”的评论

这么麻烦?var a = document.createElement('a');
a.download = 'data.xlsx';
a.href = e.target.result;
$("body").append(a); // 修复firefox中无法触发click
a.click();
$(a).remove(); 这几句代码 我感觉就搞定了, 为什么要先请求流, 然后再保存呢.....
二进制文件,你可以试一下不使用blob保存后是无法打开的。正是因为这些坑才记录的文章

回复@张豪飞 : 呵呵...我系统里面的下载 不管是后台生成的报表, 还是前台的图表下载图片 都用的a标签...难道我做了个假系统不成.....
polly
polly

引用来自“开源中国掌门人”的评论

一个a标签就能搞定的时为啥这么弄:hushed:

@开源中国掌门人 同问,何苦为难自己
张豪飞
张豪飞

引用来自“gs586169”的评论

这么麻烦?var a = document.createElement('a');
a.download = 'data.xlsx';
a.href = e.target.result;
$("body").append(a); // 修复firefox中无法触发click
a.click();
$(a).remove(); 这几句代码 我感觉就搞定了, 为什么要先请求流, 然后再保存呢.....
二进制文件,你可以试一下不使用blob保存后是无法打开的。正是因为这些坑才记录的文章
S_U_D
S_U_D
这么麻烦?var a = document.createElement('a');
a.download = 'data.xlsx';
a.href = e.target.result;
$("body").append(a); // 修复firefox中无法触发click
a.click();
$(a).remove(); 这几句代码 我感觉就搞定了, 为什么要先请求流, 然后再保存呢.....
张豪飞
张豪飞

引用来自“开源中国掌门人”的评论

一个a标签就能搞定的时为啥这么弄:hushed:

引用来自“BBDXF”的评论

我的理解,jQuery的方式更灵活。。。可以加上很多逻辑。
方法二里面说了是错误方式,jquery不支持返回blob,被转换为了字符串,无法转为blob处理
张豪飞
张豪飞

引用来自“开源中国掌门人”的评论

一个a标签就能搞定的时为啥这么弄:hushed:
如果简单get请求就可以那完全不需要的,第一种方法就是。文章主要是说下另一种方法
我的第二个爬虫——爬取今日头条街拍美女

由于界面上的图片都是通过ajax异步请求的,所以我们还是先了解一下ajax的一些基本原理; ajax:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求。其实说白了就是一个...

hello_我的哥
05/15
0
0
HTML5 FormData+Ajax上传文件表单

文件表单的数据类事multipart/form-data,因此,formData需要特殊处理. 文件上传 参考文章: HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传 [HTML5] Blob对象 通过Ajax方式上传文件,使用...

IamOkay
2017/10/31
0
0
jxl 、 apache.poi.hssf 实现本地, 服务器断的下载

上面的两个都是将数据库中的数据组装成excel 的格式,并进行下载,怎么让他下载,或者说用何种方式来请求下载资源,方式有如下两种。 1、使用ajax异步请求将数据使用 response 的OutputStrea...

QH_C
2015/03/01
0
0
Java中解决(extjs或jquery)session过期退出登录问题

解决两种情况下的用户访问超时: a)普通http请求的session超时; b)异步http请求的session超时,如果使用extjs后大部分的界面刷新都是异步的ajax请求。 不管是那种类型的http请求总是可以由...

Junn
2013/09/24
0
0
Jquery Ajax请求文件下载操作失败的原因分析及解决办法(转载)

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。 一、失败的原因 那是因为response原因,一般请求浏览器是会处理服务...

卯金刀GG
2016/09/28
28
0

没有更多内容

加载失败,请刷新页面

加载更多

nuc970 uboot nand-boot,kernel, filesystem 烧录位置

一 烧写到Nand Flash **1.1 **相关文件说明 l BSP版本:nuc970bsp-release-20150519.zip l NuWriter版本:2015/04/28-V01,nuvoTon Nu-Writer V1.0 l 烧写文件: u-boot-spl.bin:负责将u-b......

CookieDemo
49分钟前
1
0
python中sort和sorted函数小结

L.sort(cmp=None, key=None, reverse=False) sorted(iterable, cmp=None, key=None, reverse=False) 这样看,sorted函数只比sort函数多一个iterable参数,其余没什么不同,iterable是一个迭代......

上官夏洛特
今天
3
0
thinkphp 常用SQL执行语句总结

第一条:Db::tablera('vr_panomas')->where(['delete_time'=>0,'id'=>['in',$pids]])->field(['id'=>'id','post_thumb'=>'thumb','post_title'=>'title','post_tags'=>'tags','post_price'=>......

koothon
今天
5
0
支付宝返回状态resultStatus意思

上一篇集成支付宝的时候,会有一些支付宝返回的resultStatus,具体意思是: 9000 订单支付成功 8000 正在处理中 4000 订单支付失败 6001 用户中途取消 6002 网络连接出错 还有memo,意思就是...

RainOrz
今天
3
0
electron webview 页面加载事件顺序

1.did-start-loading 页面开始加载 2.load-commit 主页面文档加载 3.page-title-updated title 4.dom-ready 主页面 dom 加载完成 5.load-commit frame文档加载 6.did-frame-finish-load fram......

dubox
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部