thtf-excel

0.0.10 • Public • Published

w_excel_fill 报表设计、填报、审核

npm package NPM downloads NPM downloads Build passing codecov GitHub GitHub code size in bytes Join the chat at https://gitter.im/x-datav/spreadsheet

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

Package Sidebar

Install

npm i thtf-excel

Weekly Downloads

1

Version

0.0.10

License

MIT

Unpacked Size

2.63 MB

Total Files

15

Last publish

Collaborators

  • fishergis