57、Springboot 实现Ajax方式文件下载

pom.xml 依赖包

    org.apache.poi
    poi-ooxml
    3.10-FINAL

导出工具类

import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import sun.misc.BASE64Encoder;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.net.URLEncoder;
import java.util.List;
import java.util.Map;

/**
 * Excel 文件导出工具
 */
public class ExcelUtils {
    /**
     * 例如：
     * column.add("姓名");
     * column.add("性别");
     * column.add("年龄");
     * column.add("电话");
     * column.add("民族");
     * column.add("备注");
     *
     * data 集合中Map结构的 Key 值必须来自于 column 中的元素，且唯一
     *
     * @param header
     * @param list
     * @return
     */
    public static void exportExcel(String sheetName, List column, List> data, HttpServletRequest request, HttpServletResponse response){
        // 创建工作簿
        HSSFWorkbook workbook = new HSSFWorkbook();
        // 创建 Sheet
        HSSFSheet sheet = workbook.createSheet(sheetName);
        // 构建表头
        HSSFRow header = sheet.createRow(0);
        for(int i=0; i< column.size(); i++) {
            header.createCell(i).setCellValue(column.get(i));
        }
        // 填充数据
        for(int i=0; i< data.size(); i++) {
            HSSFRow row = sheet.createRow(sheet.getLastRowNum() + 1);
            for(int j=0; j< column.size(); j++) {
                Map item = data.get(i);
                String key = column.get(j);
                row.createCell(j).setCellValue(item.get(key)==null?"":item.get(key).toString());
            }
        }
        response.setContentType("application/vnd.ms-excel");
        try {
            // 获取浏览器名称
            String agent = request.getHeader("user-agent");
            String fileName = sheetName + ".xls";
            // 火狐浏览器
            if(agent.contains("Firefox")) {
                fileName = "=?UTF-8?B?"
                        + new BASE64Encoder().encode(fileName.getBytes("utf-8"))
                        + "?=";
                fileName = fileName.replaceAll("\r\n", "");
            }else {
                fileName = URLEncoder.encode(fileName, "utf-8");
                fileName = fileName.replace("+", "");
            }
            // 推送
            response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
            workbook.write(response.getOutputStream());
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }
}

前端 Ajax 方法

// 下载不携带参数
exportExcel (fileName) {
      
      let url = '请填写您实际的接口访问路径'      

      var xhr = new XMLHttpRequest();
      
      xhr.open('post', url, true);
      xhr.responseType = 'blob';
      xhr.setRequestHeader('content-type', 'application/json');
      xhr.onload = function () {
        console.log(this);
        if (this.status == '200') {
            // 获取响应文件流
            var blob = this.response;
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onload = function (e) {
                var a = document.createElement('a');
                a.download = fileName;
                a.href = e.target.result;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }
        }
      }
      xhr.send();
}

// 下载带参数
exportExcelWithParams (fileName) {
      let params = {}; // 此处应为您实际 搜索表单的JSON 对象

      let url = '请填写您实际的接口访问路径'        

      var xhr = new XMLHttpRequest();
      
      xhr.open('post', url, true);
      xhr.responseType = 'blob';
      xhr.setRequestHeader('content-type', 'application/json');
      xhr.onload = function () {
        console.log(this);
        if (this.status == '200') {
            // 获取响应文件流
            var blob = this.response;
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onload = function (e) {
                var a = document.createElement('a');
                a.download = fileName;
                a.href = e.target.result;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }
        }
      }
      xhr.send(JSON.stringify(params));
}

后台Controller接口

@PostMapping("请自定义访问路径")
public void exportExcel(@RequestBody CustomEntity formData, HttpServletRequest request, HttpServletResponse response) {
    // 其中 formData 的属性名, 要一一对应您 前端传过来的 JSON 对象
    // 然后 根据formData, 去您的业务表里查询列表 list
    // 构建Excel表 标题行
    // 下面只为举例说明

    List header = new ArrayList<>();
    header.add("姓名");
    header.add("性别");
    header.add("年龄");
    header.add("电话");
    header.add("地址");
    header.add("备注");
    
    // 构建Excel表 数据列表 List> 对象
    // 这里转化工具类只为省略您的构建 data 对象的过程
    // 注意：data 集合中Map结构的 key 来自于 header 对象的元素，并且唯一

    List> data = ConvertUtils.parseExcelDataForAccess(header, list);
    ExcelUtils.exportExcel("自己命名Sheet页名称", header, data, request, response);
}