公司内部项目要做一个在线的excle，通过在线excle遍历公司数据，在excle修改数据之后同步到数据库，从网上找了很多方法，推荐给大家一个免费的在线excle编辑框架-luckysheet
优点：免费，白嫖的永远是最香的，功能强大，接近实际的excle
缺点：官方api不太全，好多东西都得自己摸索，有时候需要更改一些js代码。
官方api
https://mengshukeji.github.io/LuckysheetDocs/zh/guide/api.html#%E5%8D%95%E5%85%83%E6%A0%BC%E6%93%8D%E4%BD%9C
引入相关js,可以用下载到本地也可以用在线的
创建表格：
创建静态表格js代码如下（相关参数可以从api中查看）
const options = {
container: 'luckysheet',
lang: 'zh', // 设定表格语言
title: '需求项目报价单',
data: [
{
//工作表名称
"name": "项目需求报价单",
//工作表颜色
"color": "",
"config": {
// 合并单元格
"merge": {
// 公司名
"0_0": {
"rs": 1,
"cs": 10,
"r": 0,
"c": 0
},
// 大标题
"1_0": {
"rs": 1,
"cs": 10,
"r": 1,
"c": 0
},
// 公司行
"2_1": {
"rs": 1,
"cs": 4,
"r": 2,
"c": 1
},
"2_6": {
"rs": 1,
"cs": 4,
"r": 2,
"c": 6
},
// 联系人
"3_1": {
"rs": 1,
"cs": 4,
"r": 3,
"c": 1
},
"3_6": {
"rs": 1,
"cs": 4,
"r": 3,
"c": 6
},
// 电话
"4_1": {
"rs": 1,
"cs": 4,
"r": 4,
"c": 1
},
"4_6": {
"rs": 1,
"cs": 4,
"r": 4,
"c": 6
},
// 地址
"5_1": {
"rs": 1,
"cs": 4,
"r": 5,
"c": 1
},
"5_6": {
"rs": 1,
"cs": 4,
"r": 5,
"c": 6
},
// 特殊备注
"11_1": {
"rs": 1,
"cs": 9,
"r": 11,
"c": 1
},
// 发货及运输
"12_1": {
"rs": 1,
"cs": 9,
"r": 12,
"c": 1
},
// 售后服务
"13_0": {
"rs": 2,
"cs": 1,
"r": 13,
"c": 0
},
"13_1": {
"rs": 1,
"cs": 9,
"r": 13,
"c": 1
},
"14_1": {
"rs": 1,
"cs": 9,
"r": 14,
"c": 1
},
},
// //表格行高
// "rowlen": {
// "0": 26,
// "1": 24,
// }
},
// 工作表索引
"index": "0",
"chart": [
{
"sheetIndex": "0",
"dataSheetIndex": "0",
"chartType": "column",
"row": "[1,3]",
"column": "[3,3]",
"chartStyle": "default",
"myWidth": "480",
"myHeight": "288",
"myLeft": "67",
"myTop": "11"
}
],
//激活状态
"status": "1",
//工作表的顺序
"order": "0",
//列数
"column": 10,
// 行数
"row": 8,
"celldata": [{
"r": 0,
"c": 0,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "***有限公司",
"m": "***有限公司",
"mc": {"r": 0, "c": 0, "rs": 1, "cs": 10},
"ht": "0",
"vt": "0",
"bl": 1,
"fs": 14
}
}, {
"r": 1,
"c": 0,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "***项目报价单",
"m": "***报价单",
"mc": {"r": 1, "c": 0, "rs": 1, "cs": 10},
"ht": "0",
"vt": "0",
"bl": 1,
"fs": 12
}
}, {
"r": 2,
"c": 0,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "甲方公司",
"m": "甲方公司",
"ht": "0",
"vt": "0",
},
}, {
"r": 2,
"c": 1,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "",
"m": "",
"mc": {"r": 2, "c": 1, "rs": 1, "cs": 4},
"ht": "0",
"vt": "0",
},
}, {
"r": 2,
"c": 5,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "供应商",
"m": "供应商",
"ht": "0",
"vt": "0",
},
}, {
"r": 2,
"c": 6,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "***有限公司",
"m": "***有限公司",
"mc": {"r": 2, "c": 6, "rs": 1, "cs": 4},
"ht": "0",
"vt": "0",
},
},
{
"r": 3,
"c": 0,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "联系人",
"m": "联系人",
"ht": "0",
"vt": "0",
},
}, {
"r": 3,
"c": 1,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "",
"m": "",
"mc": {"r": 3, "c": 1, "rs": 1, "cs": 4},
"ht": "0",
"vt": "0",
},
}, {
"r": 3,
"c": 5,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "业务负责",
"m": "业务负责",
"ht": "0",
"vt": "0",
},
}, {
"r": 3,
"c": 6,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": parent.userData.user.realName,
"m": parent.userData.user.realName,
"mc": {"r": 3, "c": 6, "rs": 1, "cs": 4},
"ht": "0",
"vt": "0",
},
},
{
"r": 4,
"c": 0,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "电话",
"m": "电话",
"ht": "0",
"vt": "0",
},
}, {
"r": 4,
"c": 1,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "",
"m": "",
"mc": {"r": 4, "c": 1, "rs": 1, "cs": 4},
"ht": "0",
"vt": "0",
},
}, {
"r": 4,
"c": 5,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "电话",
"m": "电话",
"ht": "0",
"vt": "0",
},
}, {
"r": 4,
"c": 6,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": parent.userData.user.tel,
"m": parent.userData.user.tel,
"mc": {"r": 4, "c": 6, "rs": 1, "cs": 4},
"ht": "0",
"vt": "0",
},
},
{
"r": 5,
"c": 0,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "地址",
"m": "地址",
"ht": "0",
"vt": "0",
},
}, {
"r": 5,
"c": 1,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "",
"m": "",
"mc": {"r": 5, "c": 1, "rs": 1, "cs": 4},
"ht": "0",
"vt": "0",
},
}, {
"r": 5,
"c": 5,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "地址",
"m": "地址",
"ht": "0",
"vt": "0",
},
}, {
"r": 5,
"c": 6,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "山东省",
"m": "山东省",
"mc": {"r": 5, "c": 6, "rs": 1, "cs": 4},
"ht": "0",
"vt": "0",
},
},
{
"r": 7,
"c": 0,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "产品ID",
"m": "产品ID",
"ht": "0",
"vt": "0",
"fs": 10,
"bl": 1,
},
},
{
"r": 7,
"c": 1,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "产品名称",
"m": "产品名称",
"ht": "0",
"vt": "0",
"fs": 10,
"bl": 1,
},
},
{
"r": 7,
"c": 2,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "产品型号",
"m": "产品型号",
"ht": "0",
"vt": "0",
"fs": 10,
"bl": 1,
},
},
{
"r": 7,
"c": 3,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "产品参数",
"m": "产品参数",
"ht": "0",
"vt": "0",
"fs": 10,
"bl": 1,
},
},
{
"r": 7,
"c": 4,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "单位",
"m": "单位",
"ht": "0",
"vt": "0",
"fs": 10,
"bl": 1,
},
},
{
"r": 7,
"c": 5,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "数量",
"m": "数量",
"ht": "0",
"vt": "0",
"fs": 10,
"bl": 1,
},
},
{
"r": 7,
"c": 6,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "单价(元)",
"m": "单价(元)",
"ht": "0",
"vt": "0",
"fs": 10,
"bl": 1,
},
},
{
"r": 7,
"c": 7,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "总价(元)",
"m": "总价(元)",
"ht": "0",
"vt": "0",
"fs": 10,
"bl": 1,
},
},
{
"r": 7,
"c": 8,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "备注",
"m": "备注",
"ht": "0",
"vt": "0",
"fs": 10,
"bl": 1,
},
},
{
"r": 7,
"c": 9,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "图片",
"m": "图片",
"ht": "0",
"vt": "0",
"fs": 10,
"bl": 1,
},
},
{
"r": 11,
"c": 0,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "特殊备注",
"m": "特殊备注",
"ht": "0",
"vt": "0",
"bl": 1,
"fs": 10
},
},
{
"r": 11,
"c": 1,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "以上报价含13%增值税专用发票，所有设备一次性提货含运费，不含安装费用、产品质保一年，终身维修，配件除外。",
"m": "以上报价含13%增值税专用发票，所有设备一次性提货含运费，不含安装费用、产品质保一年，终身维修，配件除外。",
"ht": "0",
"vt": "0",
},
},
{
"r": 12,
"c": 0,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "发货及运输",
"m": "发货及运输",
"ht": "0",
"vt": "0",
"bl": 1,
"fs": 10
},
},
{
"r": 12,
"c": 1,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "由产品供应商负责发货",
"m": "由产品供应商 负责发货",
"ht": "0",
"vt": "0",
},
},
{
"r": 13,
"c": 0,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "售后服务",
"m": "售后服务",
"ht": "0",
"vt": "0",
"bl": 1,
"fs": 10
},
},
{
"r": 13,
"c": 1,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "1、产品质量保证按照《产品质保规定》执行",
"m": "1、产品质量保证按照《产品质保规定》执行",
"vt": "0",
},
},
{
"r": 14,
"c": 1,
"v": {
"ct": {"fa": "General", "t": "g"},
"v": "2、为更好为您提供服务、本司售前电话，欢迎批评指正",
"m": "2、为更好为您提供服务、本司售前电话，欢迎批评指正",
"vt": "0",
},
},
],
"visibledatarow": [],
"visibledatacolumn": [],
"rowsplit": [],
"ch_width": 4748,
"rh_height": 1790,
"luckysheet_select_save": [
{
"row": [
0,
1
],
"column": [
0,
0
]
}
],
"luckysheet_selection_range": [],
"scrollLeft": 0,
"scrollTop": 0,
"defaultColWidth": 120,
"defaultRowHeight": 35,
}
]
}
}
}
luckysheet.create(options);
luckysheet.setRangeShow("A1", {show: false})
luckysheet.setRangeShow("A2", {show: false})
效果图：
后面会介绍创建动态excel以及数据的两种加载方式和钩子函数~~~
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
