低开视图自定义按钮导出视图数据

原创于 2026-06-18 15:54:40 发布 · 167 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#okhttp #android #普元EOS8低代码开发平台

一、前言

在低开平台列表视图开发场景中，实现自定义导出按钮的实用功能。为避免用户无筛选条件导出全量数据（引发性能损耗、数据安全风险），需增加查询条件强制校验规则：仅当视图存在检索条件时，允许导出筛选后的数据；无检索条件时，阻断导出并给出友好提示。

二、适用场景

低开平台列表视图需要自定义导出按钮，替代系统默认导出功能
强制限制用户必须输入检索条件，禁止无筛选全量导出数据
基于视图当前筛选条件，精准导出过滤后的业务数据

三、核心实现逻辑

在低开列表视图中创建自定义操作按钮
按钮点击事件中，校验视图当前查询条件是否存在
校验规则：this.finalcondition.and.items.length > 0（筛选条件数组长度大于 0，代表存在检索条件）
有检索条件：调用导出接口，处理文件流实现下载；无检索条件：弹出提示，终止导出流程

四、实现步骤

4.1 创建视图自定义按钮

进入低开平台列表视图配置页面
找到「操作按钮」配置区域，点击新增自定义按钮
配置按钮基础信息：
- 按钮名称：导出视图数据
- 按钮类型：点击事件
- 按钮样式：按需选择
保存配置，进入按钮JS 事件编辑页面

4.2 编写按钮点击事件 JS 代码

将以下完整代码粘贴到自定义按钮的 click 事件中，按需修改参数即可使用：

javascript

运行

// 导出按钮点击事件
if (this.finalcondition.and.items.length > 0) {
  // 存在查询条件，执行导出逻辑
  const param = {};
  this.Ajax.post(
    "/api/lowcode/resources/export/view?entityName=jyjt.jyjt.t_demo1&viewCode=view&resourceId=jyjt.newform3&isExportOriginalData=false&cascadeDeep=0",
    param, true, {
      responseType: 'arraybuffer',
      returnResponse: true,
    }).then(response => {
      // 创建Blob对象解析文件流
      const blob = new Blob([response.data], {
        type: 'application/vnd.ms-excel;charset=UTF-8'
      })
      // 定义导出文件名
      const filename = 'example.xlsx'
      // 创建a标签模拟下载
      const link = document.createElement('a')
      link.href = URL.createObjectURL(blob)
      link.setAttribute('download', filename)
      // 触发下载
      document.body.appendChild(link)
      link.click()
      // 清理DOM与资源，防止内存泄漏
      document.body.removeChild(link)
      URL.revokeObjectURL(link.href)
      // 导出成功提示
      this.$success("数据导出成功")
    }).catch(error => {
      console.error('导出失败:', error)
      this.$fail('导出失败，请重试')
    })
} else {
  // 无查询条件，提示用户
  this.$warning('请输入检索内容')
}

五、核心代码解析

5.1 查询条件校验

javascript

运行

this.finalcondition.and.items.length > 0

this.finalcondition：低开平台内置对象，存储视图当前所有查询条件
and.items：视图筛选条件数组，长度大于 0 表示用户已设置检索条件
作用：核心校验逻辑，严格控制导出前提

5.2 导出接口请求

responseType: 'arraybuffer'：必选配置，用于接收后端返回的 Excel 文件二进制流
this.Ajax.post：低开平台内置 Ajax 请求方法，无需额外引入依赖

5.3 文件下载逻辑

通过 Blob 对象解析接口返回的文件流
创建隐藏 <a> 标签，绑定文件流地址并设置下载文件名
模拟点击触发浏览器下载
下载完成后移除 DOM 元素、释放 URL 资源，避免内存泄漏

六、关键参数配置说明

表格

参数名	说明	修改要求
entityName	业务实体名称	替换为当前视图对应的实体编码
viewCode	列表视图编码	替换为当前视图的编码
resourceId	视图资源 ID	替换为当前视图的资源 ID
filename	导出文件名	自定义修改，后缀保持 `.xlsx`