ajax之文件下载

1,简短说明

ajax的返回值类型是json,text,html,xml等
换句话说,ajax的接收类型只能是string字符串
而文件下载是以二进制流进行的
虽然可以读取到返回的流,但jquery无法直接处理

2,处理blob类型

关键代码:

 var xhr = new XMLHttpRequest();
 xhr.open('POST', url, true);
 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();

替代方案:

使用js插件:jquery.fileDownload.js

关键代码:

$.fileDownload(url,{
        httpMethod: 'POST',
        data:$("#exportForm").serialize(),
        // 取消下载
        abortCallback: function (url) {
//          console.log('取消下载!!');
        },
        prepareCallback:function(url){
//          console.log('下载中...');
        },
        successCallback:function(url){
//          console.log('下载成功!!');
        },
        failCallback: function (html, url) {
//          console.log('下载失败!!');
        }
});

后台设置:

response.setHeader("Set-Cookie", "fileDownload=true; path=/");

3,参考链接

https://blog.csdn.net/qq_33212500/article/details/78850891
https://www.codercto.com/a/5141.html
https://blog.csdn.net/qq_33212500/article/details/78850911

猜你喜欢

转载自blog.csdn.net/weixin_37998428/article/details/81607526