后端生成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创建临时链接进行文件下载

相关推荐
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
想要入门的程序猿3 小时前
Qt写入excel
数据库·qt·excel
Q_970956393 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
翻滚吧键盘3 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
叹一曲当时只道是寻常4 小时前
vue中添加原生右键菜单
javascript·vue.js
markyankee1016 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
khalil7 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js
速易达网络16 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj16899717 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode