JAVA VUE excel导出

       后台代码依赖了jeecgboot，

页面上的：

     // 1.导出逻辑

     （此方法是选中哪天导出哪条）

      batchDel: function (fileName) {

      if (this.selectedRowKeys.length <= 0) {  //此处是获选中的数据的id,

        this.$message.warning('请选择一条记录！');

        return;

      } else {

        var ids = "";

        for (var a = 0; a < this.selectedRowKeys.length; a++) { //对选中id重新赋值给后台

          ids += this.selectedRowKeys[a] + ",";

        }

        var that = this;

       //发送请求给后台

        //that.url.exportXlsUrl  请求下载的后台路径

        //ids :选中的数据id List集合

        downFile(that.url.exportXlsUrl, {ids: ids}).then((data) => {

                  if (!data) {

                      this.$message.warning("文件下载失败")

                      return

                    }

                    if (typeof window.navigator.msSaveBlob !== 'undefined') {

                      window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')

                    }else{

                      let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))

                      let link = document.createElement('a')

                      link.style.display = 'none'

                      link.href = url

                      link.setAttribute('download', fileName+'.xls')

                      document.body.appendChild(link)

                      link.click()

                      document.body.removeChild(link); //下载完成移除元素

                      window.URL.revokeObjectURL(url); //释放掉blob对象

                    }

            }).finally(() => {

              that.loading = false;

            });

      }

      //2.导出逻辑（此方法是携带查询参数，过滤不符合条件的数据）

    handleExportXls(fileName){

      if(!fileName || typeof fileName != "string"){

        fileName = "导出文件"

      }

     //搜索参数

      let param = {...this.queryParam};

     //加上选中参数

      if(this.selectedRowKeys && this.selectedRowKeys.length>0){

        param['selections'] = this.selectedRowKeys.join(",")

      }

      console.log("导出参数",param)

     

        //that.url.exportXlsUrl  请求下载的后台路径

        //param: 查询条件

      downFile(this.url.exportXlsUrl,param).then((data)=>{

        if (!data) {

          this.$message.warning("文件下载失败")

          return

        }

        if (typeof window.navigator.msSaveBlob !== 'undefined') {

          window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')

        }else{

          let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))

          let link = document.createElement('a')

          link.style.display = 'none'

          link.href = url

          link.setAttribute('download', fileName+'.xls')

          document.body.appendChild(link)

          link.click()

          document.body.removeChild(link); //下载完成移除元素

          window.URL.revokeObjectURL(url); //释放掉blob对象

        }

      })

    },

API： downFile

import { axios } from '@/utils/request'

   /**

      * 下载文件 用于excel导出

      * @param url

      * @param parameter

      * @returns {*}

      */

  export function downFile(url,parameter){

     return axios({

        url: url,

        params: parameter,

        method:'get' ,

        responseType: 'blob'

   })

 }

request.js 

import Vue from 'vue'

import axios from 'axios'

import store from '@/store'

import { VueAxios } from './axios'

import {Modal, notification} from 'ant-design-vue'

import { ACCESS_TOKEN } from "@/store/mutation-types"

 

/**

 * 【指定 axios的 baseURL】

 * 如果手工指定 baseURL: '/jeecg-boot'

 * 则映射后端域名，通过 vue.config.js

 * @type {*|string}

 */

let apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";

console.log("apiBaseUrl= ",apiBaseUrl)

// 创建 axios 实例

const service = axios.create({

  //baseURL: '/jeecg-boot',

  baseURL: apiBaseUrl, // api base_url

  timeout: 9000 // 请求超时时间

})

 

const err = (error) => {

  if (error.response) {

    let data = error.response.data

    const token = Vue.ls.get(ACCESS_TOKEN)

    console.log("------异常响应------",token)

    console.log("------异常响应------",error.response.status)

    switch (error.response.status) {

      case 403:

        notification.error({ message: '系统提示', description: '拒绝访问',duration: 4})

        break

      case 500:

        //notification.error({ message: '系统提示', description:'Token失效，请重新登录!',duration: 4})

        if(token && data.message=="Token失效，请重新登录"){

          // update-begin- --- author:scott ------ date:20190225 ---- for:Token失效采用弹框模式，不直接跳转----

          // store.dispatch('Logout').then(() => {

          //     window.location.reload()

          // })

          Modal.error({

            title: '登录已过期',

            content: '很抱歉，登录已过期，请重新登录',

            okText: '重新登录',

            mask: false,

            onOk: () => {

              store.dispatch('Logout').then(() => {

                Vue.ls.remove(ACCESS_TOKEN)

                window.location.reload()

              })

            }

          })

          // update-end- --- author:scott ------ date:20190225 ---- for:Token失效采用弹框模式，不直接跳转----

        }

        break

      case 404:

          notification.error({ message: '系统提示', description:'很抱歉，资源未找到!',duration: 4})

        break

      case 504:

        notification.error({ message: '系统提示', description: '网络超时'})

        break

      case 401:

        notification.error({ message: '系统提示', description:'未授权，请重新登录',duration: 4})

        if (token) {

          store.dispatch('Logout').then(() => {

            setTimeout(() => {

              window.location.reload()

            }, 1500)

          })

        }

        break

      default:

        notification.error({

          message: '系统提示',

          description: data.message,

          duration: 4

        })

        break

    }

  }

  return Promise.reject(error)

};

 

// request interceptor

service.interceptors.request.use(config => {

  const token = Vue.ls.get(ACCESS_TOKEN)

  if (token) {

    config.headers[ 'X-Access-Token' ] = token // 让每个请求携带自定义 token 请根据实际情况自行修改

  }

  if(config.method=='get'){

    if(config.url.indexOf("sys/dict/getDictItems")<0){

      config.params = {

        _t: Date.parse(new Date())/1000,

        ...config.params

      }

    }

  }

  return config

},(error) => {

  return Promise.reject(error)

})

 

// response interceptor

service.interceptors.response.use((response) => {

    return response.data

  }, err)

 

const installer = {

  vm: {},

  install (Vue, router = {}) {

    Vue.use(VueAxios, router, service)

  }

}

 

export {

  installer as VueAxios,

  service as axios

}

 

JAVA 后台 ：代码（）

    /**
     * 导出excel
     *
     * @param request
     */
     //String ids 参数根据自己的实际情况定这个是针对，选中的数据导出
    @RequestMapping(value = "/exportXls",method = RequestMethod.GET)
    public ModelAndView exportXls(@RequestParam(name = "ids") String ids, HttpServletRequest request) {
        System.out.println(ids);
        //Step.2 AutoPoi 导出Excel
        ModelAndView mv = new ModelAndView(new JeecgEntityExcelView());
        //获取要导出的数据根据自己的实际情况定
        List<ReportingEpidemicVO> pageList =          
reportingtService.queryReportingEpidemicExcel(Arrays.asList(ids.split(",")));
        //按字典排序
//        Collections.sort(pageList, new Comparator<SysDepart>() {
//            @Override
//       public int compare(SysDepart arg0, SysDepart arg1) {
//             return arg0.getOrgCode().compareTo(arg1.getOrgCode());
//            }
//        });
        //导出文件名称
        //ReportingEpidemicVO.class 导出的数据表头实体类
        mv.addObject(NormalExcelConstants.FILE_NAME, "上报信息列表");
        mv.addObject(NormalExcelConstants.CLASS, ReportingEpidemicVO.class);
        //获取用户信息根据自己的实际情况定
        LoginUser user = (LoginUser) SecurityUtils.getSubject().getPrincipal();
        mv.addObject(NormalExcelConstants.PARAMS, new ExportParams("上报信息列表", "导出人:"+user.getRealname(), "上报信息列表"));
        mv.addObject(NormalExcelConstants.DATA_LIST, pageList);
        return mv;
    }