jquery 原生 导出二进制文件（前后端demo）

var dataid=$(this).attr('data-id');
var data = {"id":parseInt(dataid),"excelname":"报表名称"};

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

//创建一个 post 请求
xhr.open('POST', baseURL + "entitycard/cardbatch/checkOutCards");

//  设置响应返回的数据类型
xhr.responseType = 'arraybuffer';
//  设置一些请求头部信息
xhr.setRequestHeader("Content-type","application/json");
// 设置要发送数据，也就是要传的参数
xhr.send(JSON.stringify(data));

// 在 onreadystatechange 事件中，当服务器响应已做好被处理的准备时所执行的任务
xhr.onreadystatechange = function(){
     // xhr.response 获取后台响应内容
     // blob 解析后台返回的文件内容，这里主要是处理Blob类型
     var blob = new Blob([xhr.response], {type: 'application/vnd.ms-excel'});

     // URL.createObjectURL 用于创建 一个指向该对象的URL，该对象只能是 File 对象、Blob对象或者 MediaSource 对象。​
     // 这个URL的生命仅存在于它被创建的这个document里
     var objectUrl = URL.createObjectURL(blob);

     // 创建隐藏的可下载链接 ，a表示链接
     var alink = document.createElement("a");
     alink.href = objectUrl;
     alink.download = '报表名称'; //文件名

     // 触发点击
      alink.click();
      // 释放
      window.URL.revokeObjectURL(objectUrl);
   }
}

xhr.readyState: 值（0-4） 属性描述
      0: 请求未初始化
      1: 服务器连接已建立
      2: 请求已接收
      3: 请求处理中
      4: 请求已完成，且响应已就绪

xhr.status：属性描述
      200: "OK"
      404: 未找到页面
   
document.createElement方法：
  通过指定名称创建一个元素,也可以创建一个按钮，比如：document.createElement("BUTTON");
  具体使用方法请参考：https://www.runoob.com/jsref/met-document-createelement.html

  File对象：就是一个文件，比如我用input type="file"标签来上传文件，那么里面的每个文件都是一个File对象。

 Blob对象：就是二进制数据，比如通过new Blob()创建的对象就是Blob对象，又比如在XMLHttpRequest里，如果指定responseType为blob，那么得到的返回值也是一个blob对象。

　　注意点：每次调用createObjectURL的时候，一个新的URL对象就被创建了。即使你已经为同一个文件创建过一个URL.；如果你不再需要这个对象，要释放它，需要使用URL.revokeObjectURL()方法.，当页面被关闭，浏览器会自动释放它，但是为了最佳性能和内存使用，当确保不再用得到它的时候就应该释放它。

以上就是前端使用原生js实现导出的部分， 下面我们再来说一下后端如何实现，这次我们使用阿里的EasyExcel

第一步：pom导入依赖

 <!-- 引入阿里开源了EasyExcel 报表导出(比poi简化了配置) -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>easyexcel</artifactId>
            <version>2.1.4</version>
        </dependency>

第二步：创建一个工具类ExcelUtils

import com.alibaba.excel.EasyExcel;
import org.springframework.stereotype.Component;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.net.URLEncoder;
import java.util.List;

@Component
public class ExcelUtils {
    public static void download(HttpServletResponse response, Class dclazz, List data, String fname) throws IOException {
        // 这里注意 有同学反应使用swagger 会导致各种问题，请直接用浏览器或者用postman
        response.setContentType("application/vnd.ms-excel");
        response.setCharacterEncoding("utf-8");
        // 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
        String fileName = URLEncoder.encode(fname, "UTF-8");
        response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");
        EasyExcel.write(response.getOutputStream(), dclazz).sheet("模板").doWrite(data);
    }
}

第三步： 创建要返回的对象类

import com.alibaba.excel.annotation.ExcelProperty;
import lombok.Data;
import lombok.ToString;

import javax.validation.constraints.Max;

@Data
@ToString
public class Bookexcel {
    @ExcelProperty("编号")
    private Integer id;
    @ExcelProperty("图书名称")
    private String title;
    @ExcelProperty("isbn码")
    private String barcode;

}

稍后更新补全。。。。。。