文档章节

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

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

需求

  • 管理后台需要随时下载数据报表,数据要实时生成后转换为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

© 著作权归作者所有

张豪飞
粉丝 31
博文 45
码字总数 24709
作品 0
郑州
程序员
私信 提问
加载中

评论(12)

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

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

引用来自“LiShixi”的评论

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

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

引用来自“LiShixi”的评论

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

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

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

引用来自“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标签就能搞定的时为啥这么弄😯

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

引用来自“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保存后是无法打开的。正是因为这些坑才记录的文章
开源中国马桶盖
开源中国马桶盖
这么麻烦?var a = document.createElement('a');
a.download = 'data.xlsx';
a.href = e.target.result;
$("body").append(a); // 修复firefox中无法触发click
a.click();
$(a).remove(); 这几句代码 我感觉就搞定了, 为什么要先请求流, 然后再保存呢.....
张豪飞
张豪飞 博主

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

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

引用来自“BBDXF”的评论

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

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

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

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

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

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

IamOkay
2017/10/31
393
0
Jquery Ajax请求文件下载操作失败的原因分析及解决办法(转载)

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

卯金刀GG
2016/09/28
89
0
Django之路——7 django与ajax

Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更...

袁勇i
2018/07/05
0
0
Java中解决(extjs或jquery)session过期退出登录问题

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

Junn
2013/09/24
5.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

Mac 下 brew 使用国内的镜像源

## 阿里云## 阿里云 # 替换brew.gitcd "$(brew --repo)"git remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git# 替换homebrew-core.gitcd "$(brew --repo)/Library/......

子枫Eric
16分钟前
3
0
Java 格林威治时间字符串转本地Date对象

//import org.apache.commons.lang.StringUtils; /** * * 功能描述: 格林威治时间字符串转本地时间Date * * @param: [strDate] * @return: java.ut...

SummerGao
17分钟前
5
0
二叉搜索树的第 K 个节点

利用二叉查找树中序遍历有序的特点。 private TreeNode ret;private int cnt = 0;public TreeNode KthNode(TreeNode pRoot, int k) { inOrder(pRoot, k); return ret;}...

Garphy
28分钟前
4
0
调用约定

对于常见的指令集,在指令层面没有所谓的“函数”概念,只有“子程序”概念。子程序是存储在“主程序”之外的一段指令。子程序通过call指令调用,通过ret指令返回。子程序可以使用内存、堆栈...

tommwq
今天
3
0
设计类题目

1. 订单 和 退货单之间有什么关系? 答:退货单是 用 用户提交退货 和 订单生成的 或者 订单和退货单都是一张单子,用一个状态标识 2. 在这种由源头单生成的流程中,第二张单子是怎样生成的?...

杨凯123
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部