如何在 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 点击下载按钮