vue中axios实现下载

前端项目实现请求后台
步骤一：安装axios组件，一般使用命令：npm install axios --save

步骤二：为了项目规范整洁，把一些常用的请求方式放在了一个文件中包括GET、POST等等，以及配置请求后台统一前缀，代码如下(文件在src/libs/axios)

import axios from 'axios';
 
// 统一请求路径前缀，这个是后台接口地址
var base = 'http://127.0.0.1:8080';
 
// 超时设定
axios.defaults.timeout = 15000;
axios.defaults.withCredentials = true;
 
//get 请求
export const getRequest = (url, params) => {
    return axios({
        method: 'get',
        url: `${base}${url}`,
        params: params,
        headers: {
 
        }
    });
};
 
// post请求
export const postRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        transformRequest: [function (data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            return ret;
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        }
    });
};
 
// 文件导出
export const exportFileRequest = (url, params) => {
  return axios({
    method: 'get',
    url: `${base}${url}`,
    params: params,
    responseType: 'blob',
    headers: {
    }
  });
};

步骤三：编写统一存放API地址文件，并且传参数指定请求方式（文件在src/api/index）：

// 导入定义请求方式
import {getRequest,postRequest,exportFileRequest} from '@/libs/axios'
 
// 统一存放请求后台API地址
// 导出Excel文件
export const exportExcel = (params) => {
   return exportFileRequest("/exportExcel",params)
}
 
// 下载本地固定文件
export const exportFile = (params) => {
  return exportFileRequest("/exportFile",params)
}

步骤四：Vue页面调用API接口，并且实现文件下载

<template>
  <div>
    <button v-on:click="download">下载Excel</button>
  </div>
</template>
<script>
  // 引入需要使用的API
  import {exportExcel} from '@/api/index'
 
  export default {
    name: 'FileDownLoad',
    methods: {
      // 下载Excel
      download() {
        exportExcel().then(response => {
          console.log(response);
          this.downloadFile(response.data);
        })
      },
      downloadFile(data) {
        // 文件导出
        if (!data) {
          return
        }
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', '测试excel.xls');
 
        document.body.appendChild(link);
        link.click()
      }
    }
  }
</script>

五、后台导出文件代码

    /**
     * 导出excel
     * @param response
     */
    @GetMapping("/exportExcel")
    public void fileDownLoad(HttpServletResponse response) {
        HSSFWorkbook hssfWorkbook = new HSSFWorkbook();
        HSSFSheet sheet = hssfWorkbook.createSheet("sheet");
        // 一个创建excel标题的的自定义方法，如需要，请下载案例查看
        createTitle(hssfWorkbook, sheet);
        try {
            response.setContentType("application/vnd.ms-excel;charset=UTF-8");
            response.setCharacterEncoding("UTF-8");
            response.setHeader("Content-Disposition", "attachment;filename=" +
                    java.net.URLEncoder.encode("测试.xls", "UTF-8"));
            OutputStream outputStream = response.getOutputStream();
            hssfWorkbook.write(outputStream);
            outputStream.flush();
            outputStream.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }