基于 Vue 和 Quasar 的前端 SPA 项目实战之数据导出（十三）

回顾

通过之前一篇文章https://xie.infoq.cn/article/3178746913621661884f45c32的介绍，通过配置的方式可以零代码实现业务数据的批量导入功能，本文主要介绍业务数据批量导出相关内容。

简介

针对每个业务表，有时需要导出数据到本地文件，用来备份或者分析，这里采用的文件格式为 EXCEL，第一行为字段名称，从第二行开始为数据。

UI 界面

产品导出

API

业务数据导出相关 API，具体的通过 swagger 文档可以查看。通过 axios 封装 api，名称为 table

import { axiosInstance } from "boot/axios";
const table = { export: function(tableName) {    return axiosInstance.get("/api/business/" + tableName + "/export",      {        params: {        }      }    );  }};
export { table };

核心代码

说明

export 成功之后返回文件 URL，直接下载即可！

代码

async onExportClickAction() {  this.$q.loading.show({    message: "生成中"  });
  try {    const url = await tableService.export(this.tableName);    this.$q.notify("数据导出成功，请等待下载完成后查看！");
    window.open(url, "_blank");
    this.$q.loading.hide();  } catch (error) {    this.$q.loading.hide();    console.error(error);  }}

产品为例

点击“批量导出”按钮，成功之后自动下载文件到本地，打开 EXCEL 查看发现 3 条数据已经生成，和系统中数据一致。

小结

本文主要介绍了介绍业务数据批量导出功能，不同的业务表单操作类似，通过配置的方式可以零代码实现业务数据的批量导出功能。

crudapi 简介

crudapi 是 crud+api 组合，表示增删改查接口，是一款零代码可配置的产品。使用 crudapi 可以告别枯燥无味的增删改查代码，让您更加专注业务，节约大量成本，从而提高工作效率。crudapi 的目标是让处理数据变得更简单，所有人都可以免费使用！无需编程，通过配置自动生成 crud 增删改查 RESTful API，提供后台 UI 管理业务数据。基于主流的开源框架，拥有自主知识产权，支持二次开发。

demo 演示

crudapi 属于产品级的零代码平台，不同于自动代码生成器，不需要生成 Controller、Service、Repository、Entity 等业务代码，程序运行起来就可以使用，真正 0 代码，可以覆盖基本的和业务无关的 CRUD RESTful API。

官网地址：https://crudapi.cn

测试地址：https://demo.crudapi.cn/crudapi/login

附源码地址

GitHub 地址

https://github.com/crudapi/crudapi-admin-web

Gitee 地址

https://gitee.com/crudapi/crudapi-admin-web

由于网络原因，GitHub 可能速度慢，改成访问 Gitee 即可，代码同步更新。