1.支持类型
Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。但目前仅支持xlsx格式。
2.引入须知
<link rel='stylesheet' href='./plugins/css/pluginsCss.css' /> <link rel='stylesheet' href='./plugins/plugins.css' /> <link rel='stylesheet' href='./css/luckysheet.css' /> <link rel='stylesheet' href='./assets/iconfont/iconfont.css' /> <script src="./plugins/js/plugin.js"></script> <script src="./luckysheet.umd.js"></script>
官网提供该段落引入只包含了数据装载服务,也就是luckysheet。装载前的数据获取你还需要luckyexcel或者js-xlsx等能管解析获取file的sheets内容。
3.二次开发
Luckysheet的gitLab地址 https://github.com/dream-num/luckysheet-vue
4.配置项释义(luckysheet.create(options)
)
经目前测试,只罗列了定义清晰的释义。未展示完全(据说当前正在重构)
- 容器ID container
- 工作簿名称 title
- 语言 lang
- 唯一key gridKey
- 加载整个工作簿 loadUrl(暂时不太灵活友好)
- 加载其它页celldata loadSheetUrl
- 允许更新 allowUpdate
- 更新地址 updateUrl
- 缩略图更新地址 updateImageUrl
- 工作表配置 data(放解析的sheets)
- 插件 plugins
- 列数 column
- 行数 row
- 亿万格式 autoFormatw
- 精度 accuracy
- 允许复制 allowCopy
- 工具栏 showtoolbar
- 自定义工具栏showtoolbarConfig
- 具体配置
undoRedo: false, //撤销重做,注意撤消重做是两个按钮,由这一个配置决定显示还是隐藏
paintFormat: false, //格式刷
currencyFormat: false, //货币格式
percentageFormat: false, //百分比格式
numberDecrease: false, // '减少小数位数'
numberIncrease: false, // '增加小数位数
moreFormats: false, // '更多格式'
font: false, // '字体'
fontSize: false, // '字号大小'
bold: false, // '粗体 (Ctrl+B)'
italic: false, // '斜体 (Ctrl+I)'
strikethrough: false, // '删除线 (Alt+Shift+5)'
underline: false, // '下划线 (Alt+Shift+6)'
textColor: false, // '文本颜色'
fillColor: false, // '单元格颜色'
border: false, // '边框'
mergeCell: false, // '合并单元格'
horizontalAlignMode: false, // '水平对齐方式'
verticalAlignMode: false, // '垂直对齐方式'
textWrapMode: false, // '换行方式'
textRotateMode: false, // '文本旋转方式'
image:false, // '插入图片'
link:false, // '插入链接'
chart: false, // '图表'(图标隐藏,但是如果配置了chart插件,右击仍然可以新建图表)
postil: false, //'批注'
pivotTable: false, //'数据透视表'
function: false, // '公式'
frozenMode: false, // '冻结方式'
sortAndFilter: false, // '排序和筛选'
conditionalFormat: false, // '条件格式'
dataVerification: false, // '数据验证'
splitColumn: false, // '分列'
screenshot: false, // '截图'
findAndReplace: false, // '查找替换'
protection:false, // '工作表保护'
print:false, // '打印'
- 具体配置
- 信息栏 showinfobar
- 底部sheet页 showsheetbar
- 自定义底部sheet页 showsheetbarConfig
- 具体配置
add: false, //新增sheet
menu: false, //sheet管理菜单
sheet: false //sheet页显示
- 具体配置
- 底部计数栏 showstatisticBar
- 自定义计数栏 showstatisticBarConfig
- 具体配置
count: false, // 计数栏
view: false, // 打印视图
zoom: false, // 缩放
- 具体配置
- 允许添加行 enableAddRow
- 允许回到顶部 enableAddBackTop
- 用户信息 userInfo
- 用户信息菜单 userMenuItem
- 返回按钮链接 myFolderUrl
- 比例 devicePixelRatio
- 功能按钮 functionButton
- 自动缩进界面 showConfigWindowResize
- 刷新公式 forceCalculation
- 自定义单元格右键菜单 cellRightClickConfig
- 具体配置
copy: false, // 复制
copyAs: false, // 复制为
paste: false, // 粘贴
insertRow: false, // 插入行
insertColumn: false, // 插入列
deleteRow: false, // 删除选中行
deleteColumn: false, // 删除选中列
deleteCell: false, // 删除单元格
hideRow: false, // 隐藏选中行和显示选中行
hideColumn: false, // 隐藏选中列和显示选中列
rowHeight: false, // 行高
columnWidth: false, // 列宽
clear: false, // 清除内容
matrix: false, // 矩阵操作选区
sort: false, // 排序选区
filter: false, // 筛选选区
chart: false, // 图表生成
image: false, // 插入图片
link: false, // 插入链接
data: false, // 数据验证
cellFormat: false // 设置单元格格式
- 具体配置
- 自定义sheet页右击菜单 sheetRightClickConfig
- 具体配置
delete: false, // 删除
copy: false, // 复制
rename: false, //重命名
color: false, //更改颜色
hide: false, //隐藏,取消隐藏
move: false, //向左移,向右移
- 具体配置
- 行标题区域的宽度 rowHeaderWidth
- 列标题区域的高度 columnHeaderHeight
- 是否显示公式栏 sheetFormulaBar
- 初始化默认字体大小 defaultFontSize
- 是否限制工作表名长度 limitSheetNameLength
- 默认允许工作表名的最大长度 defaultSheetNameMaxLength
- 分页器 pager
- 具体配置
pageIndex: 1, //当前的页码
pageSize: 10, //每页显示多少行数据
total: 50, //数据总行数
selectOption: [10, 20] //允许设置每页行数的选项
- 具体配置