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

HiJiangChuan · 大约19小时之前 · 50 次点击 · 预计阅读时间 7 分钟 · 大约8小时之前开始浏览

ApiPost = postman + swagger + mock，大神都在用！>>>

如何在 Vue 中导出数据至 Excel 表格

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

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

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

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

exportexcel

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

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

接下来，我们开始吧。

配置 Vue 环境

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

npm install -g @vue/cli

vue-setup

然后我们创建一个 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

kalacloud-excel-basic

我们的「通讯录」模拟数据表格已经跑起来了，在最下面有个「导出至 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 点击下载按钮

有疑问加站长微信联系（非本文作者））

入群交流（和以上内容无关）：加入Go大咖交流群，或添加微信：liuxiaoyan-s 备注：入群；或加QQ群：701969077

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

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

配置 Vue 环境

创建 Vue 导出 Excel 组件

安装 bootstrap-vue 库

安装 xlsx 库及导出 Excel 的功能

Recommend

Vue实现导出excel表格

EXCEL大数据量导出的解决方案

表格导出功能实践

Excel数据表格设计指南

POI 如何快速导出千万级数据的 Excel

Java：导出Excel大批量数据的优化过程

Java ExcelUtil 库导出Excel表格报错问题

最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云

Vue-Highcharts 提供导出 CSV 数据选项

EasyExcel对大数据量表格操作导入导出 - 我恰芙蓉王

About Joyk