Vue3+Mybtis-plus 导出表格

1.导出页面———(vue3 element组件)

<template>
    <el-button
         type="success"
         @click="exportForm"
     >导出</el-button>
     <el-table
         :data="tableData"
          @selection-change="handleChoose"
      >
        <el-table-column type="selection" width="40px" />
        <el-table-column fixed prop="id" label="序号" type="index" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="age" label="年龄" />
      </el-table>
</template>
<script setup lang="ts" name="Index">
    import download from '@/utils/download'
    import { export } from '@/api/lujing'
    const total = ref(0) // 列表的总页数
    const exportLoading = ref(false) // 导出的加载中
    const idSelection = ref([]) // 表格选中的
    const handleChoose = (val) => {
        idSelection.value = val
    }
    const exportForm = async () => {
      try {
        const ids = idSelection.value.map((item) => item.id) // 过滤所选的id
        // 发起导出
        exportLoading.value = true
        const data = await exportInventoryAlert(ids)
        download.excel(data, '库存预警信息.xls') // 此处是封装的excel方法
      } finally {
        exportLoading.value = false
      }
}

2.调用导出下载————安装npm i xlsx --save、创建下载、发送request.download请求    

import request from '@/config/axios'

// 导出
export const exportInventoryAlert = (ids) => {
  return request.download({ url: '/url/url/url?ids=' + ids })
}

  // 一个ts文件 用于页面引用
const downloadFunction = (data: Blob, fileName: string) => {
  // 创建 blob
  const blob = new Blob([data])
  // 创建 href 超链接，点击进行下载
  window.URL = window.URL || window.webkitURL
  const href = URL.createObjectURL(blob)
  const downA = document.createElement('a')
  downA.href = href
  downA.download = fileName
  downA.click()
  // 销毁超连接
  window.URL.revokeObjectURL(href)
}

const download = {
  // 下载 Excel 方法
  excel: (data: Blob, fileName: string) => {
    downloadFunction (data, fileName + '.xls')
  },
  // 省略下载其他文件方法
}

export default download  // 导出这个download文件 方便在页面引用

---

3.后端————java导出

        3-1 导入依赖

<dependencyManagement>
   <dependencies> 
        <dependency>
           <groupId>com.alibaba</groupId>
           <artifactId>easyexcel</artifactId>
           <version>${easyexcel.verion}</version>
        </dependency>
        <!-- 工具类相关 -->
        <dependency>
            <groupId>com.google.guava</groupId>
            <artifactId>guava</artifactId>
            <optional>true</optional> <!-- 设置为可选，因为使用到 @VisibleForTesting 用于单元            测试 -->
        </dependency>
    </dependencies>
</dependencyManagement>

        3-2 创建要导出的VO类

/**
 * 需要导出的Excel VO
 */
@Data
public class ExcelVO {

    @ExcelProperty("id")
    private Long id;

    @ExcelProperty(value = "姓名")
    private String merchantName;

    @ExcelProperty(value = "年龄")
    private String age;
}
// 一袋要用@ExcelProperty注解

         3-3 实现导出方法

// 1、controller 
@GetMapping("/url")
    @Operation(summary = "导出基础信息 Excel")
    @OperateLog(type = EXPORT)
    public void exportInfo(@RequestParam("ids") Long[] ids, HttpServletResponse response) throws IOException {
        List<excelVO> excelVOS = repairpartInfoService.exportFunction(ids);
        ExcelUtils.write(response, "文件名.xls", "导出列表", excelVO.class, excelVOS);
    }


// 2、 service
List<excelVO> exportInfo(Long[] ids);


// 3.  serviceImpl
@Override
public List<excelVO> exportInfo(Long[] ids) {
    List<excelVO> excelVOs = new ArrayList<>();
    // 根据id批量查出所有信息 返回一个所需的nameAndAgeDo类List集合
    List<nameAndAgeDo> doList = selectNameMapper.selectBatchIds(Arrays.asList(ids)); 
    // 按照nameAndAgeDo对象的 id 属性进行倒序排序
    doList.sort(Comparator.comparingLong(nameAndAgeDo::getId).reversed());
    // 将查询到的结果集装入最开始定义的excelVOs集合中
    for (nameAndAgeDo infoDO : doList) {
         //将infoDO对象的属性复制到excelVO对象中
          BeanUtils.copyProperties(infoDO, excelVO);
        // ------------让某列数据结果自定义显示-------start---------
            if(infoDO.getAge.equals("") || infoDO.getAge == null) {
                  excelVO.setAge("暂无");
            } else {
                  excelVO.setAge(infoDO.getAge);
            }
        // ---------------------------end---------------------------
        excelVOs.add(excelVO);
        
    }
        return excelVOs;
}