文件导出，前后端联调实现，通过Blob

导出

基本原理

后端返给前端Excel文件作为响应发送给前端。

在这种情况下，当前端接收到这个响应时，它将是一个Blob对象。Blob对象是用来处理二进制数据的，因此在前端接收到这个响应后，可以根据需要对这个Blob对象进行进一步的操作。

Blob

Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

后端

当我们在使用Java编写Web应用程序时，我们通常会使用Servlet来处理客户端发起的HTTP请求。

在Servlet中，response 对象代表了服务器对客户端的响应。通过response 对象，我们可以设置HTTP响应的各种属性，包括响应的内容类型、状态码、头部信息等。

在后端导出文件时设置响应头是非常重要的，因为它告诉客户端接收到的数据是什么类型的文件，以及如何处理这些数据。具体来说，设置响应头的作用包括：

1. 指定内容类型：通过设置Content-Type响应头，可以告诉客户端接收到的数据是什么类型的文件，比如文本、图片、PDF、Excel等。这样客户端就可以根据这个信息来决定如何处理这些数据。
2. 指定字符编码：通过设置Content-Type和Charset响应头，可以指定文件的字符编码，确保客户端能够正确地解析和显示文本数据。
3. 提示下载：通过设置Content-Disposition响应头的attachment属性，可以提示浏览器弹出文件下载对话框，让用户保存文件。
4. 缓存控制：通过设置Cache-Control和Expires响应头，可以控制客户端缓存文件的行为，避免重复下载相同的文件。

举例代码

public void export(HttpServletResponse response, @RequestBody EvaluateTaskReportDto input) throws IOException {
    // 设置响应头
    response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
    response.setCharacterEncoding("utf-8");

    ExcelUtils.export(response, "评价任务填报错误信息", input.getErrorObject(), EvaluateTaskReportDto.class);

代码解释

1. response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); - 这行代码设置了HTTP响应的内容类型为Excel文件。application/vnd.openxmlformats-officedocument.spreadsheetml.sheet是MIME类型，表示这是一种基于XML的电子表格文件格式，通常用于表示Excel文件。
2. response.setCharacterEncoding("utf-8"); - 这行代码设置了响应的字符编码为UTF-8。这意味着在向客户端发送文本数据时，使用UTF-8编码来确保支持各种语言的字符集。

前端

当前端接收到后端的返回以后，他得到的 数据就是blob的类型的

举例代码

export function errorexport(data) {
    return request({
        url: routePath+'/evaluatetaskreport/error',
        method: 'post',
        responseType: 'blob',    
        data: data  // 将参数作为请求体传递
        
    })
}

代码解释

responseType：指定了期望接收到的响应类型，这里是'blob'，表示希望接收到的响应是一个Blob对象

举例代码

		this.$store
            .dispatch("evaluatetaskreport/errorexport", para)
            .then((res) => {
              console.log(res)
              const data = res;
            console.log(data);
            const url = window.URL.createObjectURL(new Blob([data]), {
              type: "application/vnd.ms-excel;charset=utf-8",
            });
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            let fileName = "评价任务填写错误.xlsx"
            link.setAttribute("download", fileName);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            })
            .catch((err) => {
              console.log(err);
            });

代码解释

使用window.URL.createObjectURL创建了一个指向后端返回的 Blob 数据的 URL 对象，并创建了一个隐藏的<a>标签，将该 URL 赋给href属性。然后设置了下载属性，并将<a>标签添加到页面中进行下载。最后，完成下载后移除了<a>标签。

总结

通过blob去导出文件，后端导出文件时设置响应头是非常重要的 ，前端获取到blob数据以后，无法直接下载，需要创建后端返回的blob数据对象的URL 对象，并创建了一个隐藏的<a>标签，将该 URL 赋给href属性。然后设置了下载属性 ，并将<a>标签添加到页面中进行下载。