关于vue.js:如何在-Vue-中导出数据至-Excel-表格-卡拉云

4次阅读

共计 3878 个字符，预计需要花费 10 分钟才能阅读完成。

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

咱们常常须要在 Vue 搭建的后盾管理系统里导出数据到 Excel / CSV，不便咱们将数据共享给其他同学或在另一个零碎里导入数据进行剖析。

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

咱们先来看一下导出性能页最终的成果。

导出 excel 数据简略罗唆，是不是很棒。请关上你的 Terminal，追随本教程一起边学边练。

如果你对前端不是很相熟，举荐应用卡拉云，卡拉云是一套低代码开发工具，你无需写任何前端代码，简略拖拽即可疾速搭建后盾管理系统，迅速将你跑进去的数据，一键导出至 Excel / CSV / JSON 等多种格局。详见本文文尾。

接下来，咱们开始吧。

应用 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 跑起来了。上面咱们来搭建导出页面的数据。

在 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 库来应用疏导表。

npm install bootstrap-vue --save

当初整个页面局部就写好了，咱们运行一下看看成果

npm run serve

咱们的「通讯录」模仿数据表格曾经跑起来了，在最上面有个「导出至 Excel」的按钮，然而当初还不能用。接着咱们来写「导出 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 小时，欢送收费试用卡拉云。

扩大浏览：