开源在线excel展示插件 js excel 在线插件 合并单元格 设置单元格样式 编辑工具_js在线表格插件

 源码:https://github.com/yufb12/dataexcel.git

在线预览地地址 http://www.dataexcel.cn/dataexceljs.html

1、js 版本 es6

 2、绘图引擎 zrender 地址  ZRender 文档 (ecomfe.github.io)

 3、 文件保存格式json 

4、创建并初始化

        <div id="maingrid" style="position: static; width: 100%; height: 100%;  box-sizing: border-box ">
            <div id="grid" style="position: relative; width: 1200px; height: 600px;  "> </div>
        </div>

    <script type="text/javascript">
        var domgrid = document.getElementById("grid");
        var input = document.getElementById("maininput");
        var grid = new DataExcel();
        grid.Width = domgrid.Width;
        grid.Height = domgrid.Height;
        grid.InitDom(domgrid);
        grid.InitEdit(input);
        grid.Refresh();
        grid.Paint();
        grid.On(Events.FocusedCellChanged, FocusedCellChanged);
        function FocusedCellChanged(args)
        {
            console.log("事件触发测试:" + args);
        }
    </script>

 5、文件 新建保存

    <!--File-->
    <script type="text/javascript">
        function New()
        {
            grid.Clear();
            grid.VScroll.Visible = true;
            grid.HScroll.Visible = true;
            grid.Refresh();
            grid.RePaint();
        }
        function Open()
        {
            let inputObj = document.createElement('input')
            inputObj.setAttribute('id', '_ef');
            inputObj.setAttribute('type', 'file');
            inputObj.setAttribute("style", 'visibility:hidden');
            document.body.appendChild(inputObj);
            inputObj.addEventListener("change", fileopen)
            //inputObj. = fileopen()
            inputObj.click();
        }
        function fileopen(e)
        {
            let inputObj = e.target;
            let file = inputObj.files[0];
            console.log(file);
            grid.OpenFile(file);
 
            document.body.removeChild(inputObj);
            grid.Refresh();
            grid.RePaint();
        }
        function Save()
        {
            //let domfile = document.getElementById("file");
            let content = JSON.stringify(grid.GetData());
            //domfile.innerText = content;
            let fileName = "grid.json";
            let downLink = document.createElement('a')
            downLink.download = fileName
            let blob = new Blob([content], { type: 'text/json' })
            downLink.href = URL.createObjectURL(blob)
            document.body.appendChild(downLink)
            downLink.click()
            document.body.removeChild(downLink)
        }
        function OpenDialogSize()
        {
            //let dialog = document.getElementById("modaldomwidthheight");
            //dialog.modal({
            //    keyboard: false
            //});
            let domwidth = document.getElementById("gridwidth");
            let width = grid.Width;
            let domheight = document.getElementById("gridheight");
            let height = grid.Height;
            domwidth.value = width;
            domheight.value = height;
            $('#modaldomwidthheight').modal({
                keyboard: false
            })
        }
        function SaveGridSize()
        {
            let domwidth = document.getElementById("gridwidth");
            let width = Number(domwidth.value);
            let domheight = document.getElementById("gridheight");
            let height = Number(domheight.value);
            grid.SetSize(width, height);
            grid.Refresh();
            grid.RePaint();
        }
        function Preview()
        {
            let key = (Math.round(Math.random() * 65536)).toString(16) +
                (Math.round(Math.random() * 65536)).toString(16) +
                (Math.round(Math.random() * 65536)).toString(16) +
                (Math.round(Math.random() * 65536)).toString(16) +
                (Math.round(Math.random() * 65536)).toString(16);
            let arg = "?k=" + key + "&zoom=true";
            let content = JSON.stringify(grid.GetData());
            localStorage.setItem(key, content);
            window.open("demo.html" + arg);
 
        }
        function Scale()
        {
            var zw = 0.7;
            var zh = 0.7;
            document.body.style.transformOrigin = '0 0';
            document.body.style.transform = 'scale(' + zw + ',' + zh + ')';
            document.body.style.width = window.innerWidth / zw + 'px';
            document.body.style.height = window.innerHeight / zh + 'px';
            grid.SetSize(grid.Width, grid.Height);
            grid.Refresh();
            grid.Paint();
        }
        function Restore()
        {
            var zw = 1;
            var zh = 1;
            document.body.style.transformOrigin = '0 0';
            document.body.style.transform = 'scale(' + zw + ',' + zh + ')';
            document.body.style.width = window.innerWidth / zw + 'px';
            document.body.style.height = window.innerHeight / zh + 'px';
            grid.SetSize(grid.Width, grid.Height);
            grid.Refresh();
            grid.Paint();
        }
 
        function ReadOnly()
        {
            grid.ReadOnly = CheckState.Check;
            grid.Refresh();
            grid.RePaint();
        }
        function UnReadOnly()
        {
            grid.ReadOnly = CheckState.UnCheck;
            grid.Refresh();
            grid.RePaint();
        }
    </script>