前端页面内嵌excel表格-Luckysheet

前端页面内嵌excel表格-Luckysheet

因为要输入不固定行、列的表格数据，用editor和input框都不合适，因此觉得内嵌一个excel表格展示对用户更友好

index.html -入口页面引入cdn

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

使用的页面

<div id="luckysheet"  style="margin:0;padding:0px;position:absolute;width:100%;height:95%;left: 0px;top: 0px;"></div>

我使用的是ts，因此要声明一下luckysheet

declare let luckysheet: any;

options = {
            showtoolbar: false, // 是否显示工具栏
            showinfobar: false, // 是否显示顶部信息栏
            showsheetbar: false,
            showstatisticBar:false, // 是否显示底部sheet按钮
            lang: 'zh', // 设定表格语言
            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 // 设置单元格格式
            },
            container: 'luckysheet' //luckysheet为容器id
          }
          options.data = [
             {
               celldata: 初始值
             },
           ]
          luckysheet.create(options)

展示示例图

这个功能加上之后网站速度变慢了很多，是引的cdn数据太大，速度就拖得很慢，这是肯定不行的。
因此我通过npm下载了安装包，入口页面外部地址替换成了本地地址

<link rel='stylesheet' href='./js/luckysheet/dist//plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./js/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='./js/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='./js/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="./js/luckysheet/dist/plugins/js/plugin.js" ></script>
<script src="./js/luckysheet/dist/luckysheet.umd.js" ></script>