码农研究僧

码农研究僧

关注
发信
关注(28)粉丝(399)

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

前言

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

  1. 详细讲解Java使用EasyExcel函数来操作Excel表（附实战）
  2. 详细讲解Java使用HSSFWorkbook函数导出Excel表（附实战）
  3. 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-upload
      class="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);
}

对于上述条件查询主要是 MybatisPlus自我封装的一个函数，推荐阅读： 【Java项目】实战CRUD的功能整理（持续更新）

03-04 16:43
Powered by LMLPHP ©2025 码农研究僧 0.002428