ajax请求二进制流进行处理(ajax异步下载文件)
ajax请求二进制流进行处理(ajax异步下载文件)
张豪飞 发表于8个月前
ajax请求二进制流进行处理(ajax异步下载文件)
  • 发表于 8个月前
  • 阅读 1943
  • 收藏 111
  • 点赞 0
  • 评论 12

【腾讯云】买域名送云解析+SSL证书+建站!>>>   

摘要: ajax请求一个二进制流(文件),转换为Blob进行处理或者下载保存文件

需求

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

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 26
博文 34
码字总数 17982
评论 (12)
开源中国掌门人
一个a标签就能搞定的时为啥这么弄:hushed:
笨笨D幸福

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

一个a标签就能搞定的时为啥这么弄:hushed:
我的理解,jQuery的方式更灵活。。。可以加上很多逻辑。
张豪飞

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

一个a标签就能搞定的时为啥这么弄:hushed:
如果简单get请求就可以那完全不需要的,第一种方法就是。文章主要是说下另一种方法
张豪飞

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

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

引用来自“BBDXF”的评论

我的理解,jQuery的方式更灵活。。。可以加上很多逻辑。
方法二里面说了是错误方式,jquery不支持返回blob,被转换为了字符串,无法转为blob处理
gs586169
这么麻烦?var a = document.createElement('a');
a.download = 'data.xlsx';
a.href = e.target.result;
$("body").append(a); // 修复firefox中无法触发click
a.click();
$(a).remove(); 这几句代码 我感觉就搞定了, 为什么要先请求流, 然后再保存呢.....
张豪飞

引用来自“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保存后是无法打开的。正是因为这些坑才记录的文章
polly

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

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

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

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

引用来自“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标签...难道我做了个假系统不成.....
LiShixi
作者原话:
第二种方法纯粹是在说实现方法以及更好的操作体验,不需要(举一个需要第二种方法的例子:如果生成很慢就需要生成过程中禁用按钮,防止连续生成)用到的可以不用看
生吃番茄酱

引用来自“LiShixi”的评论

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

如果文件很大,,,浏览器会不会爆炸。。
张豪飞

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

引用来自“LiShixi”的评论

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

如果文件很大,,,浏览器会不会爆炸。。
是的,单纯这样简单是不适合大型文件的
你知道啥
这个方法为什么在IE上不能够使用呢?
×
张豪飞
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: