Vue请求后端接口导出excel表格方式

 更新时间:2022年04月07日 10:33:42   作者:啊啊怪  
这篇文章主要介绍了Vue请求后端接口导出excel表格方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue请求后端接口导出excel

项目中遇到一个需求,用户下载文件,会从后端那里请求接口获得数据并下载导出excel表格

后端小哥给我返回的是二进制数据流,需要前端自己去处理这些数据

如下图,请求接口返回的数据都是乱码

在这里插入图片描述

这里我们可以在axios的请求里添加,这样返回的二进制数据就会被读取为Blob的数据,

responseType: ‘blob’

fetchGet1(url, params) {
    return axios({
      url,
      method: 'get',
      params,
      header: {
        headers: { 'Content-Type': 'application/x-download' }
      },
      responseType: 'blob'	//指明返回格式
    })
  }
//下载接口
export var downLoadOrder = (orderId) => ajax.fetchGet1(`/api/order/excel/${orderId}`)

在这里插入图片描述

当我点击下载订单的按钮后,浏览器就自动弹出下载excel文件一栏了,要注意的是,我的电脑好像没有xlsx格式的文件,所以在定义文件名那里改成了xls的格式

在这里插入图片描述

调用后端接口导出excel无效果,直接访问后端url可以

controller层代码    

@ApiOperation(value="导出模板")
    @RequestMapping(value="/getTemplate" , method= RequestMethod.GET)
    @ResponseBody
    public void getTemplate(HttpServletRequest req,HttpServletResponse res) throws IOException {
        standingBookService.getTemplate(req, res);
    }

serviceImpl代码

    public void getTemplate(HttpServletRequest req, HttpServletResponse res) throws IOException {
        String templateName = "standingBookTemplate";
        String exportName = "template";
        
        ExcelUtil.downloadExcelTemplate(req, res, templateName, exportName);
    }

导出模板路径

工具箱代码

    /**
     * 下载批量导入模板
     * @param HttpServletRequest
     * @param HttpServletResponse
     * @param templateName execl模板名称
     * @param exportName 导出表单名称
     * @throws IOException
     */
    public static void downloadExcelTemplate(HttpServletRequest req,HttpServletResponse res,String templateName,
        String exportName) throws IOException{
        
        String fullFileName = req.getServletContext().getRealPath("/doc/import/excelTemplate");
        fullFileName += (File.separator + templateName + ".xls");
        
        String export = "";
        if(DataValidUtil.isEmpty(exportName)){
            export = templateName;
        }else{
            export = exportName;
        }
        
        String userAgent = req.getHeader("USER-AGENT");
        //文件下载乱码问题
        if (StringUtils.contains(userAgent.toUpperCase(),"MSIE")||StringUtils.contains(userAgent,"Trident")) {  
            export = URLEncoder.encode(export, "UTF-8");  
        } else {  
            export = new String(export.getBytes("UTF-8"), "ISO8859-1");  
        } 
        
        //设置Content-Disposition
        res.setHeader("Content-disposition","attachment; filename="+export+".xls");
        
        //设置文件MIME类型 
        //res.setContentType("application/vnd.ms-excel");
        //前端框架自定义类型
        res.setContentType("application/export.file");
        
            OutputStream out = res.getOutputStream();
            FileInputStream in = new FileInputStream(fullFileName);
            res.setCharacterEncoding("UTF-8");
            
            byte[] b = new byte[1024];
            int n = -1;
            
            while((n=in.read(b))!=-1){
                out.write(b, 0, n);
            }
            
            in.close();
            out.close();
    }

vue前端写法

//模板下载
getTemplate(){
  const that = this;
  window.location='/test/test/getTemplate';//正确写法,直接访问你的请求路径
//这种写法会导致后台不报错,但是前端无导出效果
/*window.axios.get('/test/test/getTemplate',{responseType: 'arraybuffer'}).then((res) => {
}).catch((err) => {
});*/
},

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

相关文章

  • vue swipeCell滑动单元格(仿微信)的实现示例

    vue swipeCell滑动单元格(仿微信)的实现示例

    这篇文章主要介绍了vue swipeCell滑动单元格(仿微信)的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • vue3.x中useRouter()执行后返回值是undefined问题解决

    vue3.x中useRouter()执行后返回值是undefined问题解决

    这篇文章主要给大家介绍了关于vue3.x中useRouter()执行后返回值是undefined问题的解决方法,文中通过代码示例介绍的非常详细,对大家学习或者使用vue3.x具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • 浅谈Vue.js组件(二)

    浅谈Vue.js组件(二)

    这篇文章主要介绍了Vue.js组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue踩坑记录之src的动态绑定赋值问题

    vue踩坑记录之src的动态绑定赋值问题

    这篇文章主要介绍了vue踩坑记录之src的动态绑定赋值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    这篇文章主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法,一般使用Window scrollTo() 方法实现,本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下
    2017-11-11
  • 基于Vue3和element-plus实现登录功能(最终完整版)

    基于Vue3和element-plus实现登录功能(最终完整版)

    这篇文章主要介绍了基于Vue3和element-plus实现一个完整的登录功能,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • elementui el-calendar日历组件使用示例

    elementui el-calendar日历组件使用示例

    这篇文章主要为大家介绍了elementui el-calendar日历组件使用示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • element的el-form和el-table嵌套使用实现

    element的el-form和el-table嵌套使用实现

    本文主要介绍了element的el-form和el-table嵌套使用实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue使用openlayers实现移动点动画

    vue使用openlayers实现移动点动画

    这篇文章主要为大家详细介绍了vue使用openlayers实现移动点动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • vue中关于checkbox使用的问题

    vue中关于checkbox使用的问题

    这篇文章主要介绍了vue中关于checkbox使用的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05

最新评论