如何在 Vue 中导出数据至 Excel 表格 - 卡拉云

本文首发：《如何在 Vue 中导出数据至 Excel 表格 - 卡拉云》

我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ，方便我们将数据共享给其他同学或在另一个系统里导入数据进行分析。

本教程将带领大家一起使用 Vue 搭建一个导出功能页，将 JSON 数据 转化成 Excel 文件并导出。我们会用到 bootstrap-vue 和 xlsx 这两个 JS 库。

我们先来看一下导出功能页最终的效果。

导出 excel 数据简单干脆，是不是很棒。请打开你的 Terminal ，跟随本教程一起边学边练。

如果你对前端不是很熟悉，推荐使用卡拉云，卡拉云是一套低代码开发工具，你无需写任何前端代码，简单拖拽即可快速搭建后台管理系统，迅速将你跑出来的数据，一键导出至 Excel / CSV / JSON 等多种格式。详见本文文尾。

接下来，我们开始吧。

配置 Vue 环境

使用 npm 安装 Vue 脚手架 vue-cli

npm install -g @vue/cli

然后我们创建一个 Vue 项目 kalacloud-vue-json-to-excel

vue create kalacloud-vue-json-to-excel

安装完成后，cd 进入 kalacloud-vue-json-to-excel 目录，接下来所有操作都在这个目录之下。

我们先跑一下 Vue ，这是 vue 的默认状态

npm run serve

我们可以看到浏览器里 Vue 已经在 localhost:8080 跑起来了。下面我们来搭建导出页面的数据。

创建 Vue 导出 Excel 组件

在 src/components 组件文件夹创建 kalacloudExportExcel.vue 文件，并添加代码：

<template>
    <div class="result-table">
      <b-table striped hover bordered :items="items"></b-table>
      <button type="button" class="kalacloudExportExcel-button">导出至 Excel</button>
    </div>
</template>

<style scoped>
.result-table {
  width: 70%;
  text-align: center;
}
.kalacloudExportExcel-button {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  margin: 12px 0;
  cursor: pointer;
  font-size: 20px;  
}

.kalacloudExportExcel-button:hover {
  background-color: RoyalBlue;
}
</style>

<script>
import { BTable } from 'bootstrap-vue';
export default {
    name: 'kalacloudExportExcel',
    components: {
      BTable
    },
    data() {
      return {
        items: [
          { '姓名': '谢国庆', '年龄': 29, '电话': '13697653219' },
          { '姓名': '吕小果', '年龄': 25, '电话': '13235789213' },
          { '姓名': '宋阿美', '年龄': 27, '电话': '13756776977' },
          { '姓名': '蒋铁柱', '年龄': 33, '电话': '15003373377' }
        ]
      }
    },
}
</script>

我们在这个页面里添加了一段 JSON 格式的模拟数据的表格，在实际应用场景中，用真实数据替换到即可。然后在页面下方我加了个「导出」按钮，点击按钮，导出数据至 Excel

最后我们更新一下 App.vue 让首页与我们刚刚写的组件关联起来。

<template>
  <div id="app">
    <kalacloudExportExcel />
  </div>
</template>

<script>
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"
import kalacloudExportExcel from './components/kalacloudExportExcel.vue'
export default {
  name: 'app',
  components: {
    kalacloudExportExcel
  }
}
</script>

细心的同学已经注意到，我们在这个页面引入了 bootstrap 库，但我们还没有安装它。接下来，我们安装 bootstrap-vue 库。

安装 bootstrap-vue 库

我们需要安装一个bootstrap-vue库来使用引导表。

npm install bootstrap-vue --save

现在整个页面部分就写好了，我们运行一下看看效果

npm run serve

我们的「通讯录」模拟数据表格已经跑起来了，在最下面有个「导出至 Excel」的按钮，但是现在还不能用。接着我们来写「导出 Excel」这个功能呢。

安装 xlsx 库及导出 Excel 的功能

我们先来安装 xlsx 库 ，它是用来实现前端对 Excel 的解析：

npm install xlsx --save

当用户点击「导出至 Excel」按钮时，我们执行一个函数将 JSON 数据转化为 Excel 并下载到本地。

我们来更新一下 kalacloudExportExcel.vue ，添加「JSON 转化成 Excel」的部分。

（请将以下代码，整体替换掉旧代码）

<template>
    <div class="result-table">
      <b-table striped hover bordered :items="items"></b-table>
      <button type="button" class="kalacloudExportExcel-button" v-on:click="download">导出至 Excel</button>
    </div>
</template>

<style scoped>
.result-table {
  width: 70%;
  text-align: center;
}
.kalacloudExportExcel-button {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  margin: 12px 0;
  cursor: pointer;
  font-size: 20px;  
}

.kalacloudExportExcel-button:hover {
  background-color: RoyalBlue;
}
</style>

<script>
import { BTable } from 'bootstrap-vue';
import XLSX from 'xlsx';
export default {
    name: 'kalacloudExportExcel',
    components: {
      BTable
    },
    data() {
      return {
        items: [
          { '姓名': '谢国庆', '年龄': 29, '电话': '13697653219' },
          { '姓名': '吕小果', '年龄': 25, '电话': '13235789213' },
          { '姓名': '宋阿美', '年龄': 27, '电话': '13756776977' },
          { '姓名': '蒋铁柱', '年龄': 33, '电话': '15003373377' }
        ]
      }
    },
    methods: {
      download : function() {
        const data = XLSX.utils.json_to_sheet(this.items)
        const wb = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(wb, data, 'kalacloud-data')
        XLSX.writeFile(wb,'kalacloudExportExcel.xlsx')
      }
    }
}
</script>

• 添加v-on 点击下载按钮
• <script> 内导入 BTable 和 xlsx
• 在代码最后写入 Excel 相关格式参数，包括工作表(Sheet)的名字及 Excel 的名字

好，我们运行代码，看看效果。

npm run serve

点击「导出至 Excel」，可以看到浏览器自动下载了一个 Excel 文件，导出成功。

总结

本文手把手教大家搭建了一个 Excel 数据导出功能页，我们用到 bootstrap-vue 和 xlsx 这两个 JS 库。其实还有更简单的办法处理前端数据展示及导出数据，完全不用写前端，推荐试试卡拉云，卡拉云是一套低代码开发工具，可轻松接入任意数据库及 API，仅需拖拽即可搭建属于你后台管理工具。

下图为使用卡拉云搭建的销售 SaaS，想下载表格中的数据？仅需拖拽一个按钮到页面，用 5 秒钟简单配置即可完成「excel 下载」功能。立即试用 卡拉云。

卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。原来三天的开发工作量，使用卡拉云后可缩减至 1 小时，欢迎免费试用卡拉云。

扩展阅读：

• 最好的 5 款翻译 API 接口对比测评
• 最好用的七大顶级 API 接口测试工具
• 最好用的 5 款 React 富文本编辑器
• Postman 使用教程 - 手把手教你 API 接口测试
• 最好的 6 个免费天气 API 接口对比测评
• PAW 使用教程 - 手把手教你 API 接口测试