关于jeecg-boot导出功能(前端+后台)

本文详细介绍了一种在前端使用Modal组件进行表格数据导出的方法,包括如何通过调用后端接口实现数据导出,以及如何在不同浏览器环境下处理文件下载。文章还涉及了Ant Design中Modal组件的配置和使用,以及与之相关的表单验证规则。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

export default {
  name: 'testModal',
 // mixins: [testService],
data() {
  return {
    title: '操作',
    visible: false,
    testParam :{},
    model: {},
    labelCol: {
      xs: { span: 24 },
      sm: { span: 5 }
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 }
    },
    confirmLoading: false,
    form: this.$form.createForm(this),
    validatorRules: {}
  }
},
methods: {

downFile('insert/insertTest',this.testParam).then((data) => {
  //弹出框隐藏
  this.visible = false
  const fileName = '测试导出生成表格';
  if (!data) {
    this.$notification.error({
      message: '提示',
      description: '导出表格失败.'
    })

    return;

  }
  if (typeof window.navigator.msSaveBlob !== 'undefined') {
    window.navigator.msSaveBlob(new Blob([data]), fileName + '.xls');
  }
  else {

    let url = window.URL.createObjectURL(new Blob([data]));
    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对象
    this.$notification.info({
      message: '提示',
      description: '导出表格成功.'
    })

  }
  that.$emit('ok')
});
 
 }
}
@RequestMapping(value = "/insertTest")
public void insertTest(String xxx,String fileName, HttpServletResponse response) {

    try {
        
         ................................

        JSONArray testList = (JSONArray) jsonObject.get("data");
        List<ExcelExportEntity> entity = new ArrayList<ExcelExportEntity>();
        List<Map<String, Object>> list = new ArrayList<>();

        for (int i = 0; i <testList .size() ; i++) {
            Map map = new HashMap();
            String testa = (String) tsList.getJSONObject(i).get("testa");
            map.put("testa",testa);
            list.add(map);
        }
        entity.add(new ExcelExportEntity("测试导出", "testa", 200));

        Workbook workbook = ExcelExportUtil.exportExcel(new ExportParams(
                  fileName, fileName), entity, list);

        ServletOutputStream out = response.getOutputStream();
        workbook.write(out);
        out.flush();
        out.close();

    } catch (Exception e) {
        log.error("测试导出异常"+e.getMessage());
    }
}
### JeecgBoot Vue3 集成教程与示例 #### 项目概述 JeecgBoot Vue3 是一个基于 Vue3 的低代码开发平台,采用了 Vue3.0、Vite、Ant-Design-Vue4 和 TypeScript 等最新技术栈构建[^2]。该平台提供了丰富的功能模块,如动态表单、二次封装组件、utils 工具库、hooks、动态菜单以及权限管理等特性。 #### 安装与启动 为了运行 JeecgBoot Vue3 应用程序,需先克隆源码仓库并安装依赖项: 对于前端部分: ```bash git clone https://github.com/jeecgboot/jeecgboot-vue3.git cd jeecgboot-vue3 npm install npm run dev ``` 后端服务则可以通过以下命令获取和部署: ```bash git clone https://github.com/jeecgboot/jeecg-DskipTests=true java -jar target/*.jar ``` 完成上述操作之后,在浏览器中输入 `http://localhost:3000` 可以查看到 JeecgBoot Vue3 主界面[^1]。 #### 使用 `<script setup>` 构建页面逻辑 在编写组件时可以利用新的语法糖 `<script setup>` 来简化模板定义方式,不再需要显式的导出默认对象或返回值声明[^4]: ```html <template> <div>{{ message }}</div> </template> <script setup lang="ts"> import { ref } from 'vue' const message = ref('Hello World') </script> ``` #### 流程集成实例 针对业务流程需求,JeecgBoot 提供了 Flowable 流程引擎的支持,并实现了仿钉钉风格的工作流设计工具。下面是一个简单的例子展示如何从前端发起请求转换 BPMN 文件[^5]: ```javascript // 调用接口函数 const converterBpmn = async () => { const processModel = { code: "exampleCode", name: "Example Process", icon: {name: 'el:HomeFilled', color: '#409EFF'}, process: {}, enable: true, version: 1, sort: 0, groupId: '', remark: '' }; try { let response = await ddToBpmnXml(processModel); console.log("ddToBpmnXml result:",response.data); // 更新视图状态 processView.title = processModel.name; processView.index = processModel.code; processView.xmlData = response.data.result; processView.open = true; } catch (error) { console.error(error); } }; ``` 通过以上介绍可以看出,JeecgBoot Vue3 不仅具备强大的后台管理系统能力,还支持复杂的企业级应用开发场景下的工作流处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值