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

回顾

通过之前一篇文章 基于 Vue 和 Quasar 的前端 SPA 我的项目实战之数据导入（九）的介绍，通过配置的形式能够零代码实现业务数据的批量导入性能，本文次要介绍业务数据批量导出相干内容。

简介

针对每个业务表，有时须要导出数据到本地文件，用来备份或者剖析，这里采纳的文件格式为 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 即可，代码同步更新。