页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular VUE

网页片在线Excel表格组件x-spreadsheet(推荐)

表格 其它源码 HTML我帮您 1月前  次浏览

x-spreadsheet是一款原生js制作的网页版excel表格编辑器代码,在线编辑excel表格,功能还是挺全面的。支持撤消和恢复;画图格式;清除格式;格式;字体;字体大小;粗体;斜体字体;下划线;文本颜色;填充颜色;边框;合并单元格;排列;文字环绕;冷冻室;功能;调整行高、列宽的大小;复制、剪切、粘贴;自动填充;插入行、列;删除行、列;数据验证等功能。


CDN

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/xspreadsheet.css">
<script src="https://unpkg.com/[email protected]/dist/xspreadsheet.js">script>

<script>  x.spreadsheet('#xspreadsheet'); script>

NPM

npm install x-data-spreadsheet
<div id="x-spreadsheet-demo">div>
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 validation s.validate()
// default options {
  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,
    },
  },
}

Internationalization

// npm  import Spreadsheet from 'x-data-spreadsheet'; import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn'; Spreadsheet.locale('zh-cn', zhCN); new Spreadsheet(document.getElementById('xss-demo'));
 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/xspreadsheet.css">
<script src="https://unpkg.com/[email protected]/dist/xspreadsheet.js">script>
<script src="https://unpkg.com/[email protected]/dist/locale/zh-cn.js">script>

<script>  x.spreadsheet.locale('zh-cn'); script>


相关链接

发表评论