一、引言

公司新架构项目第一期已经算封版了，小编使用Vue也算略有小成 ???

Vue的一些基本的操作和组件小编就不一一介绍了，官方文档写的很详细啦，小编主要针对一下常用的功能以及坑进行记录。

那么今天来看下怎么使用Vue请求后台实现文件下载！

二、前提要求

1、首先要保证前后端能够正常访问，最经典一般就是跨域问题导致访问不了，

2、对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();
        }
    }

 

六、案例下载

前后端案例已上传CSDN，需要的小伙伴：点击下载！

针对以上案例如有问题，欢迎留言！

如果有帮助到你，点赞转发评论6666 ！！！  ???