用vue、elementui和springboot easyexcel写一个前端下载文件的按钮

好的，以下是一个用 Vue、Element UI 和 SpringBoot EasyExcel 实现的前端下载文件的按钮的示例代码：

1. 在 Vue 组件中，定义一个下载文件的方法：

<template>
  <div>
    <el-button type="primary" @click="downloadFile">下载文件</el-button>
  </div>
</template>

<script>
import axios from 'axios';
import { Message } from 'element-ui';

export default {
  methods: {
    downloadFile() {
      axios({
        url: '/api/download',
        method: 'get',
        responseType: 'blob', // 设置响应类型为二进制流
      }).then((res) => {
        const blob = new Blob([res.data], {
          type: res.headers['content-type'], // 根据响应头获取文件类型
        });
        const fileName = res.headers['content-disposition'].split('=')[1]; // 根据响应头获取文件名
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = fileName;
        link.click();
        window.URL.revokeObjectURL(url);
      }).catch((error) => {
        Message.error('下载文件失败！');
        console.error(error);
      });
    },
  },
};
</script>

2. 在 SpringBoot 的 Controller 中，编写一个下载文件的接口：

@RestController
@RequestMapping("/api")
public class FileController {

  @GetMapping("/download")
  public ResponseEntity<byte[]> downloadExcel() throws IOException {
    // 使用 EasyExcel 生成 Excel 文件
    String fileName = "test.xlsx";
    List<List<Object>> data = new ArrayList<>();
    data.add(Arrays.asList("姓名", "年龄", "性别"));
    data.add(Arrays.asList("张三", 18, "男"));
    data.add(Arrays.asList("李四", 20, "女"));
    ByteArrayOutputStream out = new ByteArrayOutputStream();
    ExcelWriter writer = EasyExcel.write(out).build();
    WriteSheet sheet = EasyExcel.writerSheet(0, "sheet1").build();
    writer.write(data, sheet);
    writer.finish();

    // 构造响应体
    byte[] bytes = out.toByteArray();
    HttpHeaders headers = new HttpHeaders();
    headers.setContentDispositionFormData("attachment", fileName);
    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
    return new ResponseEntity<>(bytes, headers, HttpStatus.OK);
  }
}

在以上代码中，我们使用 EasyExcel 生成一个测试用的 Excel 文件，并将其写入一个 ByteArrayOutputStream 中。然后，我们构造一个 ResponseEntity 对象，将 ByteArrayOutputStream 中的数据作为响应体，设置响应头中的 Content-Disposition 和 Content-Type，最后返回 ResponseEntity 对象。

这样，当用户点击前端的“下载文件”按钮时，就会向后端发送一个 GET 请求，后端返回的响应就是一个文件下载。前端通过 Blob 对象和 URL.createObjectURL() 方法将响应体转换为一个可下载的文件，然后构造一个 a 标签进行下载。