Ajax + Easy Excel 通过Blob实现导出excel

前端代码
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<div>
			<button onclick="exportFile()">导出</button>
		</div>
		<script>
			function exportFile(){
				var params = {};
				var url = "http://localhost:9000/exportFile/export"
				getExport(url, function (res) {
			//	    console.log(res)
					downloadForBolb(res,"学生表.xls",'application/vnd.ms-excel; charset=utf-8')
				})
			}
			
			function getExport(url, fn, errorCallback) {
			    $.ajax({
			        type: "GET",
			        url: url,
			        xhrFields: {
			            responseType: "arraybuffer",
			        },
			        error: function (XHR, textStatus, errorThrown) {
			            console.log("XHR=" + XHR + "\ntextStatus=" + textStatus + "\nerrorThrown=" + errorThrown);
			            if (errorCallback && typeof errorCallback == "function") {
			                alert("error", "系统异常,请联系管理员!");
			                errorCallback({});
			            }
			        },
			        success: function (data, textStatus) {
			            if (fn && typeof fn == "function") {
			                fn(data);
			            }
			        },
			        headers: {
			            "Authorization": window.sessionStorage.getItem("token")
			        }
			    });
			};
			
			function downloadForBolb(data, fileName, mineType) {
				 // 创建 blob
				var blob = new Blob([data], {type: mineType});
				// 创建 href 超链接,点击进行下载
				window.URL = window.URL || window.webkitURL;
				var href = URL.createObjectURL(blob);
				var downA = document.createElement("a");
				downA.href = href;
				downA.download = fileName;
				downA.click();
				// 销毁超连接
				window.URL.revokeObjectURL(href);
			};
			
		</script>
	</body>
</html>
后台代码
  • 引入Easy Excel依赖
java 复制代码
// pom.xml
 <dependency>
 	<groupId>com.alibaba</groupId>
     <artifactId>easyexcel</artifactId>
     <version>3.3.1</version>
  </dependency>
  • excel 工具类
java 复制代码
import com.alibaba.excel.EasyExcel;
import com.alibaba.excel.write.style.column.LongestMatchColumnWidthStyleStrategy;
import org.apache.poi.hssf.usermodel.*;
import org.springframework.web.multipart.MultipartFile;

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

public class ExcelUtil {
    /**
     * 将列表以 Excel 响应给前端
     *
     * @param response 响应
     * @param filename 文件名
     * @param sheetName Excel sheet 名
     * @param head Excel head 头
     * @param data 数据列表哦
     * @param <T> 泛型,保证 head 和 data 类型的一致性
     * @throws IOException 写入失败的情况
     */
    public static <T> void write(HttpServletResponse response, String filename, String sheetName,
                                 Class<T> head, List<T> data) throws IOException {
        // 输出 Excel
        EasyExcel.write(response.getOutputStream(), head)
                .autoCloseStream(false) // 不要自动关闭,交给 Servlet 自己处理
                .registerWriteHandler(new LongestMatchColumnWidthStyleStrategy()) // 基于 column 长度,自动适配。最大 255 宽度
                .sheet(sheetName).doWrite(data);
        // 设置 header 和 contentType。写在最后的原因是,避免报错时,响应 contentType 已经被修改了
        response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(filename, "UTF-8"));
        response.setContentType("application/vnd.ms-excel;charset=UTF-8");
    }

    public static <T> List<T> read(MultipartFile file, Class<T> head) throws IOException {
        return EasyExcel.read(file.getInputStream(), head, null)
                .autoCloseStream(false)  // 不要自动关闭,交给 Servlet 自己处理
                .doReadAllSync();
    }
}
  • 实体类
java 复制代码
import com.alibaba.excel.annotation.ExcelProperty;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Student {
    @ExcelProperty(value = "姓名", index = 0)
    private String name;
    @ExcelProperty(value = "年龄", index = 1)
    private int age;
    @ExcelProperty(value = "地址", index = 2)
    private String address;
}
  • Controller
java 复制代码
import com.boot.export.entity.Student;
import com.boot.util.ExcelUtil;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

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

@RestController
@RequestMapping("/exportFile")
public class exportFile {
    /**
     * /exportFile/export
     * @param params
     * @param request
     * @param response
     */
    @RequestMapping("export")
    public void export(Map<String, Object> params, HttpServletRequest request, HttpServletResponse response){
        try {
            // 获取list
            List<Student> list = new ArrayList<>();
            list.add(new Student("刘大海",54,"桃李村1号"));
            list.add(new Student("王大富",34,"桃李村4号"));
            list.add(new Student("王婆婆",82,"桃李村6号"));
            list.add(new Student("李复",24,"桃李村9号"));
            list.add(new Student("陈月",14,"桃李村3号"));
            list.add(new Student("老村长",74,"桃李村3号"));

            // 导出 Excel
            ExcelUtil.write(response, "学生信息.xls", "数据", Student.class, list);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {

        }
    }
}

Blob文件类型

相关推荐
明月清风徐徐3 分钟前
Vue实训---2-路由搭建
前端·javascript·vue.js
王解11 分钟前
速度革命:esbuild如何改变前端构建游戏 (1)
前端·vite·esbuild
葡萄城技术团队19 分钟前
使用 前端技术 创建 QR 码生成器 API1
前端
DN金猿21 分钟前
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)(很详细)
前端·vue.js·pdf
鸽鸽程序猿29 分钟前
【前端】javaScript
开发语言·前端·javascript
秦时明月之君临天下37 分钟前
React和Next.js的相关内容
前端·javascript·react.js
2401_879103681 小时前
24.11.23 Ajax
笔记·ajax
上官花雨1 小时前
什么是axios?怎么使用axios封装Ajax?
前端·ajax·okhttp
米奇妙妙wuu1 小时前
React中 setState 是同步的还是异步的?调和阶段 setState 干了什么?
前端·javascript·react.js
李刚大人1 小时前
react-amap海量点优化
前端·react.js·前端框架