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 pageList =
reportingtService.queryReportingEpidemicExcel(Arrays.asList(ids.split(",")));
//按字典排序
// Collections.sort(pageList, new Comparator() {
// @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;
}