Vue3 + TypeScript 实现 JSON 数据转 Excel

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

概述

最近在公司业务中碰到一个需求，后端返回 JSON 数据然后由前端将 JSON 数据转换为 Excel 表格下载，这里我把我的实现过程和大家分享一下，希望给有同样需求的人一点参考，如果有写的不好的地方，欢迎大家批评指正。

项目初始化

首先我们新建一个项目，执行如下命令

pnpm create vite vue-json-excel

选择 vue ，接着选择 vue-ts ，回车，等待项目安装完成， cd 进入项目根目录下，接着安装项目需要的依赖包

pnpm install

安装完成后，我们启动项目

pnpm run dev

控制台输出如下内容

vite v2.9.10 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose

ready in 353ms.

说明项目正常启动了，下面我们接着开发

功能开始

删除项目中多余的文件和内容，我们新建一个文件 src/components/jsonToExcel.vue

加入如下代码

<template>
 <div class=""></div>
</template>
<script setup lang="ts">

</script>

同时在 App.vue 中将之间建的组件引入

<template>
  <JsonToExcel />
</template>
<script setup lang="ts">
import JsonToExcel from './components/jsonToExcel.vue'
</script>

接下来我们安装一下项目需要的插件,执行如下命令

pnpm install vue3-json-excel

注册组件

import Vue from "vue"
import vue3JsonExcel from "vue3-json-excel"

Vue.use(vue3JsonExcel)

注册完成后，就可以直接在组件中使用了

<vue3-json-excel :json-data="json_data">
  Download Data
</vue3-json-excel>

有一个问题需要说明的是，引入 vue3-json-excel 后我们发现页面有报错，提示无法找到模块

截屏2022-06-11 下午11.49.24.png

而我们执行下面的命令后，发现也没有这个包，所以这里需要我们自己声明下第三方包

pnpm install @types/vue3-json-excel

截屏2022-06-11 下午11.51.20.png

根目录下新建文件 types/index.d.ts, 添加如下内容

declare module "vue3-json-excel";

接着修改 tsconfig.json 文件的 includes,内容如下

"include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
+   "types/**/*.d.ts",
+   "types/**/*.ts",
],

保存后，就会发现之前的报错提示已经没有了。

我们继续 JSON 转 Excel 的实现

在 jsonToExcel.vue 组件中添加下面内容

<template>
    <vue3-json-excel :json-data="jsonData" :fields="fields">
        <button class="btn">点击下载</button>
    </vue3-json-excel>
</template>
<script setup lang="ts">
import { ref } from "vue"
const jsonData = ref([
{
    数学:"20",
    语文:"30",
}
])
const fields = {
    数学: "数学",
    语文: "语文"
}
</script>
<style lang="css">
.btn {
    margin: 0;
    line-height: 1;
    font-family: inherit;
    padding: 10px 14px;
    display: inline-flex;
    font-size: 14px;
    border-radius: 4px;
    color: #333639;
    border: 1px solid #e0e0e6;
    background-color: #0000;
    white-space: nowrap;
    outline: none;
    justify-content: center;
    user-select: none;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    background-color: #18a058;
    color: white;
}

.btn:hover {
    border-color: #18a058;
}
</style>

点击下载按钮，可以看到已经有 Excel 文件可以下载了