写点什么

发现了一个优秀的在线表格

作者:大师兄
  • 2024-07-30
    北京
  • 本文字数:1235 字

    阅读完需:约 4 分钟

发现了一个优秀的在线表格

相信大家都用过再见表格编辑,不知道有没有在真实项目中用过在线表格编辑库?

今天大师兄给大家推荐一款在线的 Excel 表格开发库——x-spreadsheet,曾在一个星期内获取 3K star

x-spreadsheet

这是一个个人开发的项目,其他的开源表格库不能满足作者自己的开发需求,所以就自己开发一套类似的 google sheet 的在线表格库

并且开源出来,曾在一个星期内获得三千个 star

安装

可以使用 npm 包的形式安装

npm install x-data-spreadsheet
复制代码

或者使用 CDN 直接在 html 静态文件中引入

<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css"><script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.js"></script>
<script>  x_spreadsheet('#xspreadsheet');</script>
复制代码

使用

在 html 中引入

<div id="x-spreadsheet-demo"></div>
复制代码

在 js 中获取 dom 实例

import Spreadsheet from "x-data-spreadsheet";// If you need to override the default options, you can set the override// const options = {};// new Spreadsheet('#x-spreadsheet-demo', options);const s = new Spreadsheet("#x-spreadsheet-demo")  .loadData({}) // load data  .change(data => {    // save data to db  });
// data validations.validate()
复制代码


功能

项目已经支持了许多功能,相信你说需要的功能都能满足

  1. 撤销重做

  2. 添加行列

  3. 删除行列

  4. 隐藏行列

  5. 动态调整行列功能

  6. 冻结行列

  7. 添加边框/颜色/边框线条样式

  8. 合并单元格

  9. 复制

  10. 粘贴

  11. 打印

  12. 公式

  13. 筛选

  14. 自动填充

  15. 多表支持

  16. 字体样式

  17. 自定义字体/大小/颜色

  18. 填充前景色/背景色

  19. 格式校验

  20. 对齐方式

  21. 文字换行

配置

项目中有一些默认配置可以直接使用,也可以根据自己的需求,自定义设置

{  mode: 'edit', // edit | read  showToolbar: true,  showGrid: true,  showContextmenu: true,  view: {    height: () => document.documentElement.clientHeight,    width: () => document.documentElement.clientWidth,  },  row: {    len: 100,    height: 25,  },  col: {    len: 26,    width: 100,    indexWidth: 60,    minWidth: 60,  },  style: {    bgcolor: '#ffffff',    align: 'left',    valign: 'middle',    textwrap: false,    strike: false,    underline: false,    color: '#0a0a0a',    font: {      name: 'Helvetica',      size: 10,      bold: false,      italic: false,    },  },}
复制代码

中文文档:https://hondrytravis.com/x-spreadsheet-doc/

gitHub:https://github.com/myliang/x-spreadsheet

预览地址:https://myliang.github.io/x-spreadsheet/

最后

关-注【前端实验室】公-众-号 hui 复: bbbb223

免费领取前端全栈 100+套经典电子书


用户头像

大师兄

关注

分享各种前端知识 2021-03-04 加入

欢迎关注公众号:前端实验室 分享面经,新技术,实战项目,一起来折腾吧

评论

发布
暂无评论
发现了一个优秀的在线表格_前端_大师兄_InfoQ写作社区