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

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

java 复制代码
@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如何请求接口下载文件

java 复制代码
 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创建临时链接进行文件下载

相关推荐
夕水30 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了33 分钟前
实现一个简单的Vue响应式
前端·vue.js
aklry1 小时前
uniapp三步完成一维码的生成
前端·vue.js
全干engineer2 小时前
Spring Boot 实现主表+明细表 Excel 导出(EasyPOI 实战)
java·spring boot·后端·excel·easypoi·excel导出
Fireworkitte2 小时前
Java 中导出包含多个 Sheet 的 Excel 文件
java·开发语言·excel
用户26124583401613 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川4 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术4 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
百锦再6 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了6 小时前
Vue 3 中的组件通信与组件思想详解
vue.js