后端生成excel文件，VUE请求如何下载excel文件

chenwenxing228

已于 2024-08-01 16:50:32 修改

阅读量762

点赞数 13

分类专栏： VUE 文章标签： vue.js excel

于 2024-08-01 16:49:44 首次发布

本文链接：https://blog.csdn.net/qq_61068952/article/details/140851618

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、后端提供下载文件接口，例如

@GetMapping({"/excelDownload"})
    public void myExcelDownload(HttpServletResponse response) throws IOException {
        // 准备表头数据（中文名）
        List<String> header = generateHeader();
        // 设置响应头信息
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
        response.setCharacterEncoding("UTF-8");
        String fileName = "测试模板.xlsx"; // 下载文件名
        String encodedFileName = URLEncoder.encode(fileName, String.valueOf(StandardCharsets.UTF_8));
        response.setHeader("Content-disposition", "attachment;filename=" + encodedFileName);
        // 获取输出流
        OutputStream outputStream = response.getOutputStream();
        // 使用 EasyExcel 创建 ExcelWriter 对象
        ExcelWriter excelWriter = EasyExcel.write(outputStream).build();
        // 写入 Excel
        WriteSheet writeSheet = EasyExcel.writerSheet("Sheet1").build();
        excelWriter.write(new ArrayList<>(), writeSheet);
        // 写入表头
        List<List<String>> data = new ArrayList<>();
        data.add(header);
        excelWriter.write(data, writeSheet);
        excelWriter.finish();
        outputStream.close();
    }

response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"): 设置响应内容类型为Excel文件格式。
response.setCharacterEncoding("UTF-8"): 设置字符编码为UTF-8。
String encodedFileName = URLEncoder.encode(fileName, String.valueOf(StandardCharsets.UTF_8)): 对文件名进行UTF-8编码，防止中文文件名乱码。
response.setHeader("Content-disposition", "attachment;filename=" + encodedFileName): 设置响应头的Content-Disposition属性为attachment，表示这是一个附件下载，并指定下载的文件名。

总结

这段两段代码通过Spring Boot和EasyExcel库实现了一个简单的Excel文件下载功能。它首先设置了响应头信息，然后使用EasyExcel创建ExcelWriter对象，并通过输出流将Excel数据写入到响应中，最终提供给用户下载。

2、前端vue如何请求接口下载文件

 download() {
  axios({
    url: $$ContextPath.webContext + '/download', // 后端下载接口的URL
    method: 'GET', // 使用GET方法请求
    responseType: 'blob', // 设置响应类型为blob，以便处理文件数据
  }).then((response) => {
    // 创建一个URL对象，将Blob对象包装成一个临时的可访问URL
    const url = window.URL.createObjectURL(new Blob([response.data]));
    // 创建一个<a>元素，用于模拟点击下载文件
    const link = document.createElement('a');
    link.href = url;
    // 设置下载文件的名称
    link.setAttribute('download', '测试模板.xlsx');
    // 将<a>元素添加到文档中
    document.body.appendChild(link);
    // 模拟点击下载
    link.click();
    // 移除<a>元素
    link.remove();
    // 释放创建的URL对象，避免内存泄漏
    window.URL.revokeObjectURL(url);
  }).catch(error => console.error('Download error:', error)); // 捕获并打印下载过程中的错误
},

总结

这段代码实现了通过axios发送GET请求下载文件，并利用Blob和URL.createObjectURL创建临时链接进行文件下载