根据条件查询下载Excel表单（Java+Vue 及 Vue 两种方式）

前言

如果想要下载好看的Excel推荐阅读：

详细讲解Java使用EasyExcel函数来操作Excel表（附实战）
详细讲解Java使用HSSFWorkbook函数导出Excel表（附实战）
Python读取Excel的几种工具包（附Demo）

详细的Java知识推荐阅读： java框架零基础从入门到精通的学习路线附开源项目面经等（超全）

此文通过后端你的查询前端，使用前端的下载参数下载！

1. 基本知识

this.$export.excel 是在 Vue.js 组件中使用的一个方法，通过 Vue.js 插件或 mixin 扩展到组件中的一个方法

主要功能是将给定的数据导出为 Excel 文件

参数包括：

标题：Excel 文件的标题或名称
列信息：导出的数据应该如何在 Excel 表格中排列，包括列名、宽度等
数据：要导出的实际数据，可能是一个数组，每个元素代表一行数据，每行的元素按照列信息进行排列

具体作用如下：

灵活性：支持不同的选项，比如自定义标题、指定列的顺序和格式、处理数据以适应 Excel 的需求等
用户友好：提供一种用户友好的方式来导出数据，使用户能够以熟悉的 Excel 格式保存和处理数据，而无需手动将数据从应用程序复制粘贴到 Excel 中

2. 纯前端导入导出（Vue）

导入：

自定义样式以增强界面外观。
添加了 .xlsx 文件的限制，只允许选择该类型的文件进行上传。
添加了一些虚拟数据，以便在没有上传文件时也可以查看表格的展示效果。
在 <style> 部分使用了 scoped，以确保样式仅在当前组件中生效，避免全局污染。

<template><div class="excel-import-demo"><el-uploadclass="upload-excel":before-upload="handleUpload"action="default"accept=".xlsx"><el-button type="primary">选择要导入的 .xlsx 表格</el-button></el-upload><div v-if="table.columns.length > 0" class="table-container"><h2>导入的数据</h2><el-table :data="table.data" :columns="table.columns"></el-table></div></div>
</template><script>
import Vue from "vue";
import pluginImport from "@d2-projects/vue-table-import";Vue.use(pluginImport);export default {data() {return {table: {columns: [],data: [],},};},methods: {handleUpload(file) {this.$import.xlsx(file).then(({ header, results }) => {// 将表头作为列的标签和属性this.table.columns = header.map((e) => {return {label: e,prop: e,};});// 演示用的虚拟数据this.table.data = [{ id: 1, name: "John", age: 30, email: "john@example.com" },{ id: 2, name: "Jane", age: 28, email: "jane@example.com" },{ id: 3, name: "Doe", age: 35, email: "doe@example.com" },];});return false;},},
};
</script><style scoped>
.excel-import-demo {max-width: 600px;margin: 0 auto;
}.upload-excel {margin-bottom: 20px;
}.table-container {margin-top: 20px;
}
</style>

导出：

<template><div class="excel-export-demo"><div class="header"><h2>数据导出为 Excel</h2></div><div class="content"><el-button @click="exportExcel" type="primary"><el-icon name="download" /> 导出为 Excel</el-button></div><div class="footer"><p>© 2024 码农研究僧</p></div></div>
</template><script>
import Vue from 'vue'
import pluginExport from '@d2-projects/vue-table-export'Vue.use(pluginExport)export default {data() {return {table: {columns: [],data: []}}},methods: {exportExcel() {this.$export.excel({columns: this.table.columns,data: this.table.data}).then(() => {this.$message('导出表格成功')})}}
}
</script><style scoped>
.excel-export-demo {max-width: 400px;margin: 0 auto;text-align: center;padding: 20px;
}.header h2 {margin-bottom: 20px;
}.footer {margin-top: 20px;font-size: 12px;
}
</style>

3. 前后端（Vue + Java）

根据前面的一个框架，大致设计一个导出Excel

通过点击按钮：

handleExcel() {this.loading = true;queryAllForExcel( Object.assign(this.getQuery()) ).then(res=>{console.log();const  column = this.option.column;const  data = res.data.data;let opt = {title: 'EXCEL 下载',column: column,data: data};console.log(opt);this.$export.excel({title: opt.title || new Date().getTime(),columns: opt.column,data: opt.data});}).finally(()=>{this.loading = false;});
},

传输的条件如下：（以下为Demo）

getQuery(){var mTime = this.formInline.maintenanceTimePicker;var aTime = this.formInline.acceptTimePicker;var js;// 多机种的多个搜索var newmodel = '';console.log(this.formInline.model);if(this.formInline.model){//添加检查for(var i=0;i<this.formInline.model.length;i++){if(i==0){newmodel=this.formInline.model[i]}else{newmodel=newmodel+'-'+this.formInline.model[i]}}}// 设备编号的多个搜索var nos = '';if(this.formInline.equipmentNo){ // 不为空的判断for(var i=0;i<this.formInline.equipmentNo.length;i++){if(i==0){nos=this.formInline.equipmentNo[i]}else{nos=nos+'-'+this.formInline.equipmentNo[i]}}}if((mTime!=null&&(mTime.length!=1))&&(aTime!=null&&(aTime.length!=1))){js = {"equipmentNos": nos,"model":newmodel,"maintenanceType":this.formInline.maintenanceType,"maintenanceStartTime":moment(mTime[0]).format('YYYY-MM-DD HH:mm:ss'),"maintenanceEndTime":moment(mTime[1]).format('YYYY-MM-DD HH:mm:ss'),"acceptStartTime":moment(aTime[0]).format('YYYY-MM-DD HH:mm:ss'),"acceptEndTime":moment(aTime[1]).format('YYYY-MM-DD HH:mm:ss'),};}else if((mTime!=null&&(mTime.length!=1))&&aTime==null){js = {"equipmentNos": nos,"model":newmodel,"maintenanceType":this.formInline.maintenanceType,"maintenanceStartTime":moment(mTime[0]).format('YYYY-MM-DD HH:mm:ss'),"maintenanceEndTime":moment(mTime[1]).format('YYYY-MM-DD HH:mm:ss'),};}else if((aTime!=null&&(aTime.length!=1))&&mTime==null){js = {"equipmentNos": nos,"model":newmodel,"maintenanceType":this.formInline.maintenanceType,"acceptStartTime":moment(aTime[0]).format('YYYY-MM-DD HH:mm:ss'),"acceptEndTime":moment(aTime[1]).format('YYYY-MM-DD HH:mm:ss'),};}else{js = {"equipmentNos": nos,"model":newmodel,"maintenanceType":this.formInline.maintenanceType,}; }console.log(js);return js;
},

前端接口如下：

export const queryAllForExcel = ( params) => {return request({url: '/api/blade-equipment/maintenanceorder/queryAllForExcel',method: 'get',params: {...params,},timeout:18000,})
}

对应后端传输的接口：

@GetMapping("/queryAllForExcel")
@ApiOperationSupport(order = 2)
@ApiOperation(value = "查全部", notes = "传入maintenanceOrder")
public R<List<MaintenanceOrderVO>> queryAll(MaintenanceOrderVO maintenanceOrdervo) {QueryWrapper<MaintenanceOrder> maintenanceOrderQueryWrapper = new QueryWrapper<>();// 条件查询maintenanceOrderQueryWrapper = this.getWrapper(maintenanceOrdervo,maintenanceOrderQueryWrapper);List<MaintenanceOrder> maintenanceOrders = maintenanceOrderService.list(maintenanceOrderQueryWrapper);List<MaintenanceOrderVO> maintenanceOrderVOS = MaintenanceOrderWrapper.build().listVO(maintenanceOrders);return R.data(maintenanceOrderVOS);
}