基于canvas的和js开发的类excel表格,支持用户自定义添加工具栏以及右键菜单
项目演示:
https://ostask.github.io/daodaoExcel/
引入daodaoExcel dist目录中的js文件
在使用 ZRender 前需要初始化实例,具体方式是传入一个对象,对象的id属性为dom的id
示例:
<div id="daodao" style="width:1000px;height:600px;"></div>
<script src="daodaoExcel.js"></script>
<script>
var excel = new DaoDaoExcel({id:'daodao'})
</script>
属性 |
默认值 |
类型 |
含义 |
name |
(根据位置改变) |
String |
单元格的名字 |
border |
false |
Boolean |
是否有边框,true:有边框。false:无边框 |
cellHeight |
30 |
Number |
单元格高度 |
cellWidth |
100 |
Number |
单元格宽度 |
fill |
#ffffff |
String |
单元格颜色 |
fontFamily |
微软雅黑 |
String |
单元格字体 |
fontSize |
14 |
Number |
字体大小 |
fontStyle |
normal |
String |
字体样式,同css的fontStyle |
fontWeight |
normal |
String |
字体粗细, 同css的fontWeight |
merge |
false |
Boolean |
该单元格是否被合并,true:被合并, false:没有合并,注:如果merge为true,且mergeConfig为null,span为0,row为0的时候,该单元格不会显示出来 |
row |
1 |
Number |
单元格占几行,注:单独设置row不会起作用,还要设置cellWidth,以及merge,mergeConfig,不建议自己改这个值 |
span |
1 |
Number |
单元格占几列,注:单独设置span不会起作用,还要设置cellHeight,以及merge,mergeConfig,不建议自己改这个值 |
text |
"" |
String |
单元格的文字 |
textAlign |
center |
String |
单元格的文字对齐方式(center,left,right) |
textFill |
#000000 |
String |
单元格文字的颜色 |
x |
(根据位置改变) |
Number |
单元格所在的横向的坐标 ,坐标从零开始 |
xPlace |
(根据位置改变) |
Number |
单元格左上角的像素坐标 |
y |
(根据位置改变) |
Number |
单元格所在的纵向的坐标 ,坐标从零开始 |
yPlace |
(根据位置改变) |
Number |
单元格左上角的像素坐标 |
ltIcon |
"none" |
String |
单元格左上角的图标 ,注:有五个默认的图标 "upArrow","downArrow","leftArrow","rightArrow","filter",暂时不支持别的图标,有需求联系作者 |
lbIcon |
"none" |
String |
单元格左下角的图标 ,注:有五个默认的图标 "upArrow","downArrow","leftArrow","rightArrow","filter",暂时不支持别的图标,有需求联系作者 |
rtIcon |
"none" |
String |
单元格右上角的图标 ,注:有五个默认的图标 "upArrow","downArrow","leftArrow","rightArrow","filter",暂时不支持别的图标,有需求联系作者 |
rbIcon |
"none" |
String |
单元格右下角的图标 ,注:有五个默认的图标 "upArrow","downArrow","leftArrow","rightArrow","filter",暂时不支持别的图标,有需求联系作者 |
imgUrl |
"none" |
String |
单元格的图片地址 |
excel.tableHeaderCell
1.excel.tableHeaderCell.data
属性 |
默认值 |
类型 |
含义 |
index |
(根据位置改变) |
Number |
表头顺序 |
width |
100 |
Number |
表头宽度 |
xPlace |
(根据位置改变) |
Number |
表头像素位置 |
1. excel.tableIndexCell.data
属性 |
默认值 |
类型 |
含义 |
index |
(根据位置改变) |
Number |
列头顺序 |
height |
30 |
Number |
列头高度 |
yPlace |
(根据位置改变) |
Number |
列头像素位置 |
excel.contextMenu
1. excel.contextMenu.menuEl
2. excel.contextMenu.menus
3. excel.toolBar.copyButton
4. excel.toolBar.pasteButton
5. excel.toolBar.clearFormat
6. excel.toolBar.typeFaceButton
7. excel.toolBar.fontSizeButton
8. excel.toolBar.fontWeightButton
9. excel.toolBar.fontItalicButton
10. excel.toolBar.textFillButton
11. excel.toolBar.fillButton
12. excel.toolBar.borderButton
13. excel.toolBar.alignLiftButton
14. excel.toolBar.alignRightButton
15. excel.toolBar.alignCenterButton
16. excel.toolBar.mergeCellButton
17. excel.toolBar.splitCellButton
18. excel.toolBar.addImageButton
3. excel.setTableDatas(config)
属性 |
默认值 |
类型 |
含义 |
data |
必填 |
Array |
一维数组 或 二维数组,data中,x和y是必须的,其它属性参考 excel.cells[x][y].data |
clear |
false |
Boolean |
填充数据时是否清空其他数据 true:清空 false:不清空 |
4. excel.cells[x][y].setData(data)
修改单元格数据,data格式见上面 cells.data
5. excel.cells[x][y].clear()
6. excel.cells[x][y].clearFormat()
7. excel.setSpanNum(number)
8. excel.setRowNum(number)
这个功能我没有写。。大家可以用 excel.cells 的data (hhh,我是懒鬼,反正没人用,那我就怎么开心怎么来啦)
excel.contextMenu.addButton(text,func)
例:添加清除内容按钮
const clearInputBtn = excel.contextMenu.addButton('清除内容',() => {
this.selectCells.forEach(cell => {
cell.clear()
})
})
excel.toolBar.addButton(html,tooltip,func)
例:
const sayHello = excel.toolBar.addButton(
'<span class="say-hello"></span>',
'说你好',
(e)=>{
alert('你好')
}
)
移除自身。当不再需要使用该实例时,调用该方法以释放内存。
clickCell事件
例:
excel.on("clickCell",(data) =>{
console.log(data)
})