vue如何导出文件流获取附件名称并下载(在response.headers里解析filename导出)

 更新时间:2024年07月24日 14:58:02   作者:wangjiecsdn  
这篇文章主要介绍了vue如何导出文件流获取附件名称并下载(在response.headers里解析filename导出),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

需求

之前实现的导出都是各自的业务层,调用接口,使用blob对象转换,最终a标签导出,需要自定义文件名跟文件后缀。

现在统一在拦截器配置,根据后端返回的response.headers解析是否是文件流,统一做配置处理,然后对后端返回的filename进行转码,后端统一配置文件名及类型。

前端只管a标签下载即可。 

以往实现的方法(各自的业务层写方法)

//数据导出
    indexExport() {
      let statYear = {
        statDate: this.form.statDate,
        dataType: "1",
      };
      let infoMsg = this.$notify.info({
        title: "消息",
        message: "正在下载文件,勿退出,请稍后",
        duration: 0,
      });
      gljyjcDataExport(statYear).then((res) => {
        infoMsg.close(); //下载成功,等待下载提示框关闭
        this.$notify({
          title: "成功",
          message: "下载完成",
          type: "success",
        });
        let blob = new Blob([res], {
          type: "",
        });
        let url = window.URL.createObjectURL(blob);
        const link = document.createElement("a"); // 创建a标签
        link.href = url;
        link.download = "数据清单(" + this.form.statDate + ").xlsx"; // 重命名文件
        link.click();
        URL.revokeObjectURL(url); // 释放内存
      });
    },

现在实现的方法(axios里拦截器统一配置处理)

主要看注释行“文件下载”,因为后端返回流文件时候携带的response.headers会多Content-Disposition这个字段。

然后拿到里边的filename后,对filename包含的信息进行转码就可

decodeURIComponent、decodeURI都可进行转码,具体二者有啥区别,水平有限没大看懂,可自行百度查阅符合选项

//拦截器里肯定有请求拦截代码axios.interceptors.request。怕展示代码冗余就不多贴了
...
axios.interceptors.response.use(
    response => {
    
        const res = response.data;
        const config = response.config;
        console.log(response.headers,"response.headers")//这块可以看一下response.headers究竟是什么
        // 文件下载(主要看这块)
        if (response.headers['content-disposition']) {
            let downLoadMark = response.headers['content-disposition'].split(';');
            if (downLoadMark[0] === 'attachment') {
                // 执行下载
                let fileName = downLoadMark[1].split('filename=')[1];
                if (fileName) {
                    //fileName = decodeURIComponent(filename);//对filename进行转码
                    fileName = decodeURI(fileName);
                    if (window.navigator.msSaveOrOpenBlob) {
                        navigator.msSaveBlob(new Blob([res]), fileName);
                    } else {
                        let url = window.URL.createObjectURL(new Blob([res]));
                        let link = document.createElement('a');
                        link.style.display = 'none';
                        link.href = url;
                        link.setAttribute('download', fileName);
                        document.body.appendChild(link);
                        link.click();
                        return;
                    }
                } else {
                    return res;
                }
            }
        }

        // 全局异常处理(获取code做正常的拦截操作,根据自己的业务层code写符合的就可)
        if (res.code !== CODE_SUCCESS) {
            if (res.code == '205') {
                Message.error({ message: res.data || "登录失败" });
                store.dispatch("user/logout").then(() => {
                    window.location.reload();
                  });
                return
            }
            if (res.code === WARN_TIP) {
                Message.warning({
                    message: res.message
                });
            }

            if (res.code === LOGIN_FAIL) {
                Message.error({ message: res.message || "登录失败" });
            }
            // 其他状态码特殊处理
            return Promise.reject(new Error(res.message || "Error"));
        }

        return res;
    }, error => {
        // 防重复提交
        if (error.message) {
            allowRequest(reqList, error.message.url);
        }
        if (error.response) {
            if (error.response.data.code == 600 && !tipCode) {
                tipCode = true;
                Message.error({ message: '系统登录身份令牌失效,请重新登录!' });
            } else if (error.response.status == 500) {
                Message.error({ message: '系统异常' });
            }
        }
        return Promise.reject(error);
    }
);

以上是未解析之前浏览器看到的文件夹名

经过decodeURIComponent或decodeURI解析后,前端就能获取到后端返回的中文文件名了。

把文章链接复制粘贴给后端,让大佬自己赏阅。

截止目前,前端能干的活就到此为止了。

那么有人就想问了,那后端response.headers里没返回我想要的Content-Disposition,前端怎么捕获。

对此呢,我又找我们后端大佬要了一下后端实现的代码,我就原封不动贴出来了,因为我根本看不懂说的是什么意思

  • Controller端代码(啥是Controller,根本不懂)
 @PostMapping(value="/exportAddresses")
    public Result exportAddresses(HttpServletResponse response){
        String[] titles = new String[] {"id","tableCode","columnName"};
        List<Map<String,Object>> objList = new ArrayList<>();
        DownLoadFileController addressService;
        List<NpColumns> npColumnsList = npColumnsService.findByTableCode("APP_TASK_CASE_INFO");
        for(NpColumns item : npColumnsList){
            Map<String,Object> tempMap = new HashMap<>();
            tempMap.put("id", item.getId());
            tempMap.put("tableCode", item.getTableCode());
            tempMap.put("columnName", item.getColumnName());
            objList.add(tempMap);
        }
        try {
            FileUtils.exportExcel(response,"地址树",titles,objList);
            return ResultGenerator.genSuccessResult("导出成功!");
        }catch (Exception e){
            e.printStackTrace();
            return ResultGenerator.genFailResult("导出失败!");
        }
    }
  • 工具类方法(啥是工具类,也不懂)
public static void exportExcel(HttpServletResponse response,String fileName,String[] titles,List<Map<String,Object>> result){
        HSSFWorkbook wb;
        OutputStream output = null;
        String tempName = fileName;
        try {
            Date date = new Date();
            SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");
            fileName +="_"+df.format(date)+".xls";
            String encodedFilename = URLEncoder.encode(fileName, "UTF-8");
            wb= new HSSFWorkbook();
            HSSFSheet sh = wb.createSheet();
            // 设置列宽
            for(int i = 0; i < titles.length-1; i++){
                sh.setColumnWidth( i, 256*15+184);
            }
            // 第一行表头标题,CellRangeAddress 参数:行 ,行, 列,列
            HSSFRow row = sh.createRow(0);
            HSSFCell cell = row.createCell(0);
            cell.setCellValue(new HSSFRichTextString(tempName));
            //cell.setCellStyle(fontStyle(wb));
            sh.addMergedRegion(new CellRangeAddress(0, 0, 0,titles.length-1));
            // 第二行
            HSSFRow row3 = sh.createRow(1);
            // 第二行的列
            for(int i=0; i < titles.length; i++){
                cell = row3.createCell(i);
                cell.setCellValue(new HSSFRichTextString(titles[i]));
                //cell.setCellStyle(fontStyle(wb));
            }
            //填充数据的内容  i表示行,z表示数据库某表的数据大小,这里使用它作为遍历条件
            int i = 2, z = 0;
            while (z < result.size()) {
                row = sh.createRow(i);
                Map<String,Object> map = result.get(z);
                for(int j=0;j < titles.length;j++) {
                    cell = row.createCell(j);
                    if(map.get(titles[j]) !=null) {
                        cell.setCellValue(map.get(titles[j]).toString());
                    }else {
                        cell.setCellValue("");
                    }
                }
                i++;
                z++;
            }
            output = response.getOutputStream();
            response.reset();
            response.addHeader("Content-Type","application/octet-stream;charset=utf-8");
            response.setHeader("Content-disposition", "attachment; filename="+encodedFilename);
            response.setContentType("application/msexcel");
            wb.write(output);
            output.flush();
            output.close();
        }catch (Exception e){
            e.printStackTrace();
        }
    }
  • 最后还有个中文处理乱码那块(这都是啥啥啥,还是不懂)
String encodedFilename = URLEncoder.encode(fileName, "UTF-8");设置文件名的中文编码
response.addHeader("Content-Type","application/octet-stream;charset=utf-8");//这里也设置了相同的编码格式
response.setHeader("Content-disposition", "attachment; filename="+encodedFilename);

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue对象拷贝,解决由于引用赋值修改原对象的方式

    vue对象拷贝,解决由于引用赋值修改原对象的方式

    这篇文章主要介绍了vue对象拷贝,解决由于引用赋值修改原对象的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue3+vite配置多页面的示例代码

    vue3+vite配置多页面的示例代码

    通过配置多页面应用,从而将给子模块依赖分隔开各自加载,可以减少初始资源的请求,加快页面的访问速度,这篇文章主要介绍了vue3+vite配置多页面的详细过程,需要的朋友可以参考下
    2023-06-06
  • vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

    vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

    这篇文章主要介绍了vue-cli项目中使用公用的提示弹层tips或加载loading组件,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2018-05-05
  • Vue中inheritAttrs的使用实例详解

    Vue中inheritAttrs的使用实例详解

    这篇文章主要介绍了Vue中inheritAttrs的使用实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • vue.js2.0 实现better-scroll的滚动效果实例详解

    vue.js2.0 实现better-scroll的滚动效果实例详解

    better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写。better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等,下面通过本文给大家介绍vue.js2.0 实现better-scroll的滚动效果,感兴趣的朋友一起看看吧
    2018-08-08
  • vue结合element-ui使用示例

    vue结合element-ui使用示例

    这一篇主要是创建一个vue项目并结合饿了么框架element-ui的文章。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • 一文详解vue2的diff算法流程

    一文详解vue2的diff算法流程

    本篇文章将会尝试从算法的角度主要聊一聊vue2的diff策略,帮助读者朋友在遇到相关的面试题时可以和面试官谈笑风生,文中有相关的图解和代码示例,感兴趣的同学跟着小编一起来看看吧
    2023-08-08
  • vue指令v-html使用过滤器filters功能实例

    vue指令v-html使用过滤器filters功能实例

    在本篇文章里我们给大家整理的是关于vue指令v-html使用过滤器filters功能的实例内容,需要的朋友们学习下。
    2019-10-10
  • 关于vue2使用element UI中Descriptions组件的遍历问题详解

    关于vue2使用element UI中Descriptions组件的遍历问题详解

    最近element-ui遇到了很多坑,下面这篇文章主要给大家介绍了关于vue2使用element UI中Descriptions组件的遍历问题,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • 浅析Vue下的components模板使用及应用

    浅析Vue下的components模板使用及应用

    这篇文章主要介绍了Vue下的components模板的使用及应用,本文通过代码介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11

最新评论