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

目录

• 前言
• 1. 基本知识
• 2. 纯前端导入导出（Vue）
• 3. 前后端（Vue + Java）

  前言

  如果想要下载好看的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 文件的限制，只允许选择该类型的文件进行上传。

      • 添加了一些虚拟数据，以便在没有上传文件时也可以查看表格的展示效果。

      • 在 部分使用了 scoped，以确保样式仅在当前组件中生效，避免全局污染。

          
        
            
              选择要导入的 .xlsx 表格
            
            
        
              
        导入的数据
              
            
          
        
        
        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;
            },
          },
        };
        
        
        .excel-import-demo {
          max-width: 600px;
          margin: 0 auto;
        }
        .upload-excel {
          margin-bottom: 20px;
        }
        .table-container {
          margin-top: 20px;
        }
        
        

        导出：

          
        
            
        
              
        数据导出为 Excel
            
            
        
              
                 导出为 Excel
              
            
            
        
              
        © 2024 码农研究僧
            
          
        
        
        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('导出表格成功')
              })
            }
          }
        }
        
        
        .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;
        }
        
        

        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
              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
              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;
        },
        
          return request({
            url: '/api/blade-equipment/maintenanceorder/queryAllForExcel',
            method: 'get',
            params: {
              ...params,
            },
            timeout:18000,
          })
        }
        
        	QueryWrapper