Vue3 + x-sheet 打造你自己的在线表格应用
需求
小编发现如果要公开分享一个Excel表格,要么是一个Excel截图,要么是公开的腾讯文档、WPS文档链接,那么我们能不能打造一个属于自己的在线Excel表格应用呢?
于是小编找到一个开源在线excel库x-sheet,结合vue3来搭建我们的在线数据表应用。
步骤
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来打造自己在线表格应用,详细源码请参考
教程比较初级,欢迎大家一同学习探讨。
评论