@thtf/excel

w_excel_fill 报表设计、填报、审核

A web-based JavaScript spreadsheet

CDN

<link
  rel="stylesheet"
  href="https://unpkg.com/x-data-spreadsheet@1.0.13/dist/xspreadsheet.css"
/>
<script src="https://unpkg.com/x-data-spreadsheet@1.0.13/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
{
  mode: "design", // 模式 design(设计)|scan(预览)|fill(填报)
  version: "1.0", // 初始化参数版本号，一般不用管
  view: { // excel容器宽/高
    height: () => document.querySelector(`.${cssPrefix}`).getBoundingClientRect().height,
    width: () => document.querySelector(`.${cssPrefix}`).getBoundingClientRect().width,
  },
  showGrid: true, // 是否显示excel网格
  showToolbar: true, // 是否显示excel工具条
  showFooter: true, // 是否显示excel底部状态栏
  showContextmenu: true, // 是否显示excel右键菜单
  showExtendContextmenu: false,   //是否显示右键扩展菜单项
  showSysExplain: false,   //工具栏是否显示系统功能说明按钮
  disableTools:[], // 禁用工具条的工具项,工具项包含：undo(撤销)|redo(恢复)|paintFormat(格式刷)|clearFormat(清除格式)|clearCell(清空单元格)|deleteCell(删除单元格)|readonly(只读)|format(数据格式)|font(字体)|fontSize(字号)|bold(加粗)|italic(倾斜)|underline(下划线)|strike(删除线)|textColor(字体颜色)|fillColor(填充颜色)|border(边框)|merge(合并单元格)|align(水平对齐)|valign(垂直对齐)|textwrap(自动换行)|freeze(冻结)|autoFilter(自动筛选)|formula(函数)
  savedKjIds:[], // 受保护的控件id集合
  row: {
    len: 100, // excel初始行数
    height: 20, // excel初始行号
    indexHeight: 20 // excel默认行高
  },
  col: {
    len: 26, // excel初始列数
    width: 100, // excel初始列宽
    indexWidth: 80, // excel默认列宽
    minWidth: 60 // excel最小列宽
  },
  style: { // 单元格默认样式
    bgcolor: '#ffffff', // 单元格背景色
    align: 'left', // 单元格内容水平对齐方式 left(居左)|center(居中)|right(居右)
    valign: 'middle', // 单元格内容垂直对齐方式 top(居上)|middle(居中)|bottom(居下)
    textwrap: false, // 单元格内容是否自动换行
    strike: false, // 单元格内容 删除线
    underline: false, // 单元格内容 下划线
    color: '#0a0a0a', // 单元格内容颜色
    font: {
      name: '宋体', // 单元格内容字体 默认为 宋体
      size: 10, // 单元格内容字号
      bold: false, // 单元格内容加粗
      italic: false, // 单元格内容倾斜
    }
  }
}

Setting属性

属性	说明	类型	可选值	默认值
beforeExtendTools	工具栏拓展，加载在最前面	Array	参照ExtendTool	[]
afterExtendTools	工具栏拓展，加载在最后面	Array	参照ExtendTool	[]

ExtendTool属性

属性	说明	类型	可选值	默认值
type	类型	String	button、dropDown、select、multipleSelect	button
className	标签类名	String	-	-
text	文字	String	-	拓展按钮
tips	提示文字	String	-	提示
handle	回调函数	Function	-	-
options	下拉选项	Array	[{label: '', value: ''}]	[]

Internationalization

// npm
import Spreadsheet from "x-data-spreadsheet";

new Spreadsheet(document.getElementById("xss-demo"));

<!-- Import via CDN -->
<link
  rel="stylesheet"
  href="https://unpkg.com/x-data-spreadsheet@1.0.13/dist/xspreadsheet.css"
/>
<script src="https://unpkg.com/x-data-spreadsheet@1.0.13/dist/xspreadsheet.js"></script>

功能列表

• 撤销、恢复
• 格式刷
• 清除单元格格式
• 清空单元格
• 删除单元格
• 单元格只读
• 单元格数据格式设置
• 字体、字号
• 字体加粗、倾斜、下划线、删除线、颜色
• 单元格填充颜色
• 边框
• 合并、拆分单元格
• 单元格水平、垂直对齐
• 单元格自动换行
• 单元格冻结
• 单元格自动筛选
• 单元格函数设置
• 单元格添加、删除斜线
• 鼠标拖动修改行高/列宽
• 右键设置行高/列宽
• 复制、剪切、粘贴
• 单元格自动填充
• 在当前单元格上/下插入指定行数或者左/右插入指定列数
• 删除行/列
• 隐藏、取消隐藏行/列
• 单元格、区域填报时隐藏
• 数据验证
• 单元格、区域多选批量操作
• 单元格支持换行输入
• 单元格高度自适应内容高度
• 表格状态栏支持实时查看当前单元格坐标
• 表格状态栏支持修改表名

Development

git clone https://github.com/myliang/x-spreadsheet.git
cd x-spreadsheet
npm install
npm run dev

Open your browser and visit http://localhost:8080

Browser Support

Modern browsers(chrome, firefox, Safari, Edge, IE10+).

LICENSE

MIT