前台Vue使用axios实现文件下载功能

一、引言

公司新架构项目第一期已经算封版了,小编使用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 !!!  ???

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页
实付 29.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值