Chinaunix首页 | 论坛 | 博客
  • 博客访问: 4630
  • 博文数量: 8
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 90
  • 用 户 组: 普通用户
  • 注册时间: 2021-12-06 21:35
文章分类
文章存档

2022年(4)

2021年(4)

我的朋友
最近访客

分类: jQuery

2022-02-24 09:26:52

![如何在 Vue 中导出数据至 Excel 表格]()


本文首发:[《如何在 Vue 中导出数据至 Excel 表格 - 卡拉云》](blog/vue-export-json-to-excel-csv/)


我们经常需要在 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](static/7a63cf19b8be4b93e790b002e2ffa899/1e5d2/01-vue-setup.png)


然后我们创建一个 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-run.png](static/e7f87ceefd2388f25c7b5cc65d405eba/b2b2c/02-vue-run.png)


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


## 创建 Vue 导出 Excel 组件


在 `src/components` 组件文件夹创建 `kalacloudExportExcel.vue` 文件,并添加代码:


```







```


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


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


```




```


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


## 安装 bootstrap-vue 库


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


```
npm install bootstrap-vue --save
```


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


```
npm run serve
```


![kalacloud-excel-basic](static/4896de346afa9c0b1f78886eadc11e13/b6e58/03-kalacloud-excel-basic.jpg)


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


## 安装 xlsx 库及导出 Excel 的功能


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


```
npm install xlsx --save
```


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


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


(请将以下代码,整体替换掉旧代码)


```







```


-   添加`v-on` 点击下载按钮
-   `
阅读(485) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~