vue中axios实现下载

骑猪看日落 2021-07-26 20:16 526阅读 0赞

前端项目实现请求后台  
步骤一：安装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();
            }
        }