spring boot axios导出后缀是csv，xls，xlsx文件

淡淡的烟草味﹌ 2021-09-23 09:22 628阅读 0赞

### spring boot axios导出CSV文件 ###

*  引言
 *  开发环境
 *  前端界面
 *  前端代码
 *  axios 的api配置
 *  后端代码
 *  运行结果
 *  错误情况
 *  正确情况res返回的截图

# 引言 #

小编是一个比较喜欢研究的人，项目中经常需要导出附件的操作，前端时间一直想仔细研究，尝试了几次都没成功，这次项目开发有大量的导出操作，所以小编不得不静下心来仔细研究研究。
       本次研究小编一共研究了CSV，xls，xlsx文件的导出操作。话不多说，直接上代码，希望对您有帮助。

# 开发环境 #

后端: Spring boot  
前端： vue axios

# 前端界面 #

三个按钮分别代表三个不同的类型文件的导出操作，分别是CSV,excel03,excel07  
![在这里插入图片描述][20191016172106289.png]

# 前端代码 #

<template>
        <div>
            <el-button type="primary" @click="csv">csv</el-button>
            <el-button type="primary" @click="excel03">excel03</el-button>
            <el-button type="primary" @click="excel07">excel07</el-button>
        </div>
    </template>
    
    <script>
        import pageApi from '../../../../api/pageApi'
        export default {
            name: "filedown",
            methods:{
                csv(){
                    pageApi.csv().then(res => { //res为axios请求返回的未被本地代码处理过的对象
                        //注意这里是new Blob([res.data])
                        const url = window.URL.createObjectURL(new Blob([res.data]))
                        const link = document.createElement('a')
                        link.href = url
                        link.setAttribute('download', `1.csv`)
                        document.body.appendChild(link)
                        link.click()
                    })
    
                },
                excel03(){
                    pageApi.exc03().then(res => { //res为axios请求返回的未被本地代码处理过的对象
                          //注意这里是new Blob([res.data])
                        const url = window.URL.createObjectURL(new Blob([res.data]))
                        const link = document.createElement('a')
                        link.href = url
                        //注意这里是1.xls` 名称可变，可以根据后端的参数来变化
                        link.setAttribute('download', `1.xls`)
                        document.body.appendChild(link)
                        link.click()
                    })
    
                },
                excel07(){
                    pageApi.exc07().then(res => { //res为axios请求返回的未被本地代码处理过的对象
                            //注意这里是new Blob([res.data])
                        const url = window.URL.createObjectURL(new Blob([res.data]))
                        const link = document.createElement('a')
                        link.href = url
                             //注意这里是1.xlsx` 名称可变，可以根据后端的参数来变化
                        link.setAttribute('download', `1.xlsx`)
                        document.body.appendChild(link)
                        link.click()
                    })
    
                }
            }
        }
    </script>
    <style scoped>
    </style>

前端的下载代码网上很多，大都是千篇一律，但是都能实现类似以标签的操作。

# axios 的api配置 #

//导出csv文件不需要配置responseType
    csv(){
        return new Promise(function (resolve, reject) {
               axios.post('/DownloadController/CSV', {})
              .then((res) => {
                resolve(res)
              })
              .catch((error) => {
                reject(error)
              })
        })
      },
    //导出exc03文件不需要配置responseType 为 arraybuffer ，设置为其他界面会出现乱码
      exc03(){
        return new Promise(function (resolve, reject) {
          let myAxios = axios.create({
              responseType: 'arraybuffer'
          })
    
          myAxios.post('/DownloadController/exc03', {})
              .then((res) => {
                resolve(res)
              })
              .catch((error) => {
                reject(error)
              })
        })
      },
    //导出exc07文件不需要配置responseType 为 arraybuffer ，设置为其他界面会出现乱码
      exc07(){
        return new Promise(function (resolve, reject) {
          let myAxios = axios.create({
          responseType: 'arraybuffer'
    
          })
          myAxios.post('/DownloadController/exc07', {})
              .then((res) => {
                resolve(res)
              })
              .catch((error) => {
                reject(error)
              })
        })
      }

# 后端代码 #

ackage com.frame.demo.web.controller;
    
    import io.swagger.annotations.Api;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import org.apache.tomcat.util.http.fileupload.IOUtils;
    import org.springframework.core.io.ResourceLoader;
    import org.springframework.web.bind.annotation.*;
    
    import javax.annotation.Resource;
    import javax.servlet.ServletOutputStream;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.*;
    
    /**
     * @version V1.0
     * @Author llt
     * @Mail liulangtao@boco.com.cn
     * @Date 2019-10-16  15:17
     * @description
     ***/
    @RequestMapping("/DownloadController")
    @Api(value = "附件下载")
    @RestController
    public class DownloadController {
        @Resource
        private ResourceLoader resourceLoader;

导出csv后端代码

@CrossOrigin(origins = "http://localhost:8080")
        @RequestMapping(value = "/CSV", method = { RequestMethod.POST,RequestMethod.GET}) // postman,url,3.tbox请求下载文件,暂时只支持单文件下载。
        public void getCSV(HttpServletRequest request, HttpServletResponse response){
            String fileName ="1.csv";
            InputStream inputStream = null;
            ServletOutputStream servletOutputStream = null;
            try {
                String path = "source" + File.separator + fileName;
                org.springframework.core.io.Resource resource = resourceLoader.getResource("classpath:"+path);
                response.setContentType("application/octet-stream");
                response.addHeader("Cache-Control", "no-cache, no-store, must-revalidate");
                response.addHeader("Pragma", "no-cache");
    
                inputStream = resource.getInputStream();
                servletOutputStream = response.getOutputStream();
                IOUtils.copy(inputStream, servletOutputStream);
                response.flushBuffer();
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                try {
                    if (servletOutputStream != null) {
                        servletOutputStream.close();
                    }
                    if (inputStream != null) {
                        inputStream.close();
                    }
                    System.gc();
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }

导出03版excel后端代码

@CrossOrigin(origins = "http://localhost:8080")
        @RequestMapping(value = "/exc03", method = { RequestMethod.POST,RequestMethod.GET}) // postman,url,3.tbox请求下载文件,暂时只支持单文件下载。
        public void getExcel03(HttpServletRequest request, HttpServletResponse response){
            String fileName ="1.xls";
            InputStream inputStream = null;
            ServletOutputStream servletOutputStream = null;
            try {
                String path = "source" + File.separator + fileName;
                org.springframework.core.io.Resource resource = resourceLoader.getResource("classpath:"+path);
                response.setContentType("application/octet-stream");
                response.addHeader("Cache-Control", "no-cache, no-store, must-revalidate");
                response.addHeader("Pragma", "no-cache");
    
                inputStream = resource.getInputStream();
                servletOutputStream = response.getOutputStream();
                IOUtils.copy(inputStream, servletOutputStream);
                response.flushBuffer();
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                try {
                    if (servletOutputStream != null) {
                        servletOutputStream.close();
                    }
                    if (inputStream != null) {
                        inputStream.close();
                    }
                    System.gc();
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }

导出07版excel后端代码

@CrossOrigin(origins = "http://localhost:8080")
        @RequestMapping(value = "/exc07", method = { RequestMethod.POST,RequestMethod.GET}) // postman,url,3.tbox请求下载文件,暂时只支持单文件下载。
        public void getExcel07(HttpServletRequest request, HttpServletResponse response){
            String fileName ="1.xlsx";
            InputStream inputStream = null;
            ServletOutputStream servletOutputStream = null;
            try {
                String path = "source" + File.separator + fileName;
                org.springframework.core.io.Resource resource = resourceLoader.getResource("classpath:"+path);
                response.setContentType("application/octet-stream");
                response.addHeader("Cache-Control", "no-cache, no-store, must-revalidate");
                response.addHeader("Pragma", "no-cache");
    
                inputStream = resource.getInputStream();
                servletOutputStream = response.getOutputStream();
                IOUtils.copy(inputStream, servletOutputStream);
                response.flushBuffer();
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                try {
                    if (servletOutputStream != null) {
                        servletOutputStream.close();
                    }
                    if (inputStream != null) {
                        inputStream.close();
                    }
                    System.gc();
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
    }

总共研究了导出三类文件，其实后端的代码都是一样的，除了导出的文件不同，全部粘贴上的目的是为了让使用的同学看的更加清楚，少走弯路。希望对您有帮助。

# 运行结果 #

csv文件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]  
excel03文件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70 1]  
excel07文件：  
![在这里插入图片描述][20191016173712120.png]

# 错误情况 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70 2]

返回的结果里面出现了乱码，此致情况通常是由于你请求时候axios的response设置的错误或者没有设置 responseType为arraybuffer。  
axios的responseType设置方式是：  
let myAxios = axios.create(\{  
responseType: ‘arraybuffer’  
\})

# 正确情况res返回的截图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70 3]

注意截图中的红色标注的地方：正确返回时候是一个arraybuffer对象，说明设置了responseType为arraybuffer

[20191016172106289.png]: /images/20210923/4acab4e97e8b496b9e1ce384abafec11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]: /images/20210923/f9cf4c4a52ac48ea9d0729a2dd2d9d23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70 1]: /images/20210923/0b1ae0cbc56f47ad90f09b960219ee75.png
[20191016173712120.png]: /images/20210923/f4757ddc9f8e4989a73aa2d580a75eca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70 2]: /images/20210923/69471cfb3e7348d6bee6ec49203e8156.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70 3]: /images/20210923/5eb20159c6564c059749536506a1f15d.png