iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue请求后端接口导出excel表格方式
  • 604
分享到

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

2024-04-02 19:04:59 604人浏览 独家记忆
摘要

目录Vue请求后端接口导出excel调用后端接口导出excel无效果,直接访问后端url可以controller层代码    serviceImpl代码

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);
    }

导出模板路径

工具箱代码

    
    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';//正确写法,直接访问你的请求路径
//这种写法会导致后台不报错,但是前端无导出效果

},

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: Vue请求后端接口导出excel表格方式

本文链接: https://www.lsjlt.com/news/145195.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue请求后端接口导出excel表格方式
    目录vue请求后端接口导出excel调用后端接口导出excel无效果,直接访问后端url可以controller层代码    serviceImpl代码...
    99+
    2022-11-13
  • Vue前端导出后端返回的excel文件方式
    目录前端导出后端返回的excel文件处理文件的下载(后端Excel导出)后端文件流通过 Blob 下载拼接 URL 下载前端导出后端返回的excel文件 在网上搜索了一番之后,决定采...
    99+
    2022-11-13
  • vue中element如何自定义表单验证请求后端接口验证
    小编给大家分享一下vue中element如何自定义表单验证请求后端接口验证,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!做vue...
    99+
    2022-10-19
  • 后端接口返回文件流格式、前端如何实现文件下载导出呢?
    在项目开发过程中,难免会需要实现文件下载功能,记录下自己实际开发过程过程中遇到两种实现的方式。一种:后端直接返回加密url ,前端解密后直接使用 a标签下载就可以,这种方法相等比较简单,另一种:后端接...
    99+
    2023-09-02
    前端 java javascript
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作