Vue3 + x-sheet 打造你自己的在线表格应用

#javascript#spreadsheet

需求

小编发现如果要公开分享一个Excel表格，要么是一个Excel截图，要么是公开的腾讯文档、WPS文档链接，那么我们能不能打造一个属于自己的在线Excel表格应用呢？

于是小编找到一个开源在线excel库x-sheet，结合vue3来搭建我们的在线数据表应用。

vue3 x-sheet

步骤

1. 启动 vue3 工程

首先，我们使用 vite 模板快速启动一个vue3工程。

如果是在自己工程中，这一步可以跳过。

npm create vite@latest vue3-x-sheet -- --template vue-ts
cd vue3-x-sheet
npm install
npm run dev

这样我们就快速启动了一个vue3工程

2. 下载 x-sheet

因为x-sheet目前还在开发中，我们主要的使用方式是从源代码仓库下载，安装依赖后自己打包。

后续有新的引入方式，小编再来更新

# 拉取官方仓库
git clone https://gitee.com/eigi/x-sheet
cd x-sheet

# 切换到 dev 分支
git fetch origin dev
git checkout -b dev origin/dev
git pull origin dev

# 安装依赖
npm i
# 打包
npm run build

打包结束后，资源文件都在项目根目录的dist文件夹下，浏览器打开dist/index.html文件就能预览到x-sheet案例。

3. 引入 x-sheet

我们发现暂时只能通过script标签引用文件的方式来使用。

先将刚刚打包好的dist文件夹下的所有资源文件拷贝粘贴到vue3工程的public文件下，然后在vue3工程的index.html文件中引入x-sheet的js和css文件。

<link href="css/x-sheet.css" rel="stylesheet">
<script src="js/x-sheet.js"></script>

4. 添加表格组件

在src/components目录下新建表格组件Sheet.vue

<script setup lang="ts">
import { onMounted } from "vue";

onMounted(() => {
  new window.XSheet("#demo");
});
</script>

<template>
  <div id="demo"></div>
</template>

<style scoped>
#demo {
  width: 100%;
  height: 100%;
}
</style>

表格的宽高等样式可以自行设定。

由于咱们用的是Vue+Typescript，这时候VSCode编辑器会提示TS错误

Property 'XSheet' does not exist on type 'Window & typeof globalThis'.

需要在src下的任意一个*.d.ts申明文件中添加Window的接口申明，在我们这个vite模板工程里就直接在vite-env.d.ts文件中添加即可

/// <reference types="vite/client" />
export {};
declare global {
  interface Window {
    XSheet: any;
  }
}

5. 引入表格组件

参考原有的HelloWorld.vue的用法，我们也在App.vue中引入我们刚刚新建的表格组件Sheet.vue，并把HelloWorld.vue组件去除

<script setup lang="ts">
import Sheet from "./components/Sheet.vue";
</script>

<template>
  <Sheet />
</template>

<style scoped>
</style>

这时候我们预览页面其实就可以看到表格组件了，可以根据自己的需要调整下样式即可，比如我们在style.css中将整个应用调成全屏

#app {
  /* max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center; */
  height: 100vh;
  width: 100vw;
}

6. 添加表格数据

x-sheet初始化实例的时候支持配置布局、自定义表格数据等

详细信息参考这里：X-Sheet 开发教程：初始化配置自定义布局

我们这里简单配置几个单元格和合并单元格作为演示，如下Sheet.vue中

const settings = {
    // 工作簿配置
    workConfig: {
      // 主体配置
      body: {
        // 工作表主体配置
        sheets: [
          {
            // 工作表名称
            name: "sheet1",
            // 表格配置
            tableConfig: {
              // 表格数据，二维数组
              data: [
                [
                  {
                    // 文本内容
                    text: "Text1",
                  },
                  {
                    // 文本内容
                    text: "Text2",
                  },
                ],
              ],
              // 合并单元格
              merge: { merges: ["A2:B3"] },
            },
          },
        ],
      },
    },
  };

  new window.XSheet("#demo", settings);

现在就能正常展示我们自定义的表格数据了。

总结

以上就是小编实现在vue3工程中使用x-sheet来打造自己在线表格应用，详细源码请参考

https://github.com/openHacking/vue3-x-sheet

教程比较初级，欢迎大家一同学习探讨。

参考

评论