网页版仿Excel

网页版仿Excel。最近公司忙的很蛋疼，只好模仿Excel做一个网页版的Excel。xin）far（bing）attention（kuang），只能用坚定的头脑接受它，然后开始做。其实主要目的是为了能够连接到自己的数据库，方便表格的操作。后来发现实现成本太高，做了个前端DEMO就果断放弃了。github地址https://github.com/zhuqitao/E...实现功能字体、字号、颜色、背景色、粗体、斜体等字体样式基本操作功能鼠标拖动多个选择单元格左右居中布局合并，split按单元格插入一个函数（没有计算功能的函数，静态加上函数名即可）打开excel截图（。给大家看家本领，html+css+js的三剑客，不就是一个form，在html中填写表格，修改样式，页面效果就ok了，遇到的第一个问题就是滚动的问题，看上面的截图可以看到，这其实是一个固定的表格表头，第一个表格的列是固定的，其他部分是滚动的，但不是那么简单。另一个问题是垂直滚动时，第一行（表头）不动，但第一列必须相应移动，同样水平滚动是这样。我该怎么办？我没有遇到过这种情况，但是我必须解决它。不知道的网友可以考虑一下怎么做呢？如果你知道如何处理这种情况，就不要喷博客主菜了。最后的解决办法是写三张表，一张表头（第一行），一张表第一列，一张表的主要内容，见下图：table1放置表头（A，B，C),table2放置第一列，table3放置在中间操作区，设置table1和2为overflow:hidden，只有table3可以滚动，监听table3的scroll事件，获取table3的scrollLeft和scrollTop，赋值分别到table1和table2的scrollLeft和scrollTop。按住并拖动鼠标选择多个单元格这是这个DEMO的唯一亮点（我认为）。表格目前设置为30*30表格。最初的想法是监听mousedown事件获取鼠标按下时的位置，然后监听鼠标移动事件（mousemove）获取鼠标当前位置，然后根据当前位置和按下时的位置。循环遍历所有单元格元素，判断单元格是否在矩形内，然后为选中的单元格添加active类。这样做的结果是页面很卡，因为鼠标移动过程会多次触发鼠标移动事件（mousemove），多次遍历cell元素循环。后面在鼠标移动事件中不进行单元格遍历操作，在鼠标松开事件中遍历所有单元格元素。这样确实更快了，但是还有一个问题是上面两种方法没有解决的，就是如果选择的元素很多（比如100个），遍历的时候需要给这100个元素添加一个active类cell元素，其实js操作和操作DOM是比较耗时的，这里也没有好的DOM操作缓存的方法。在一头雾水之际，想到了目前流行的虚拟dom框架（react、vue等），果断使用了vue。在vue实例中创建两个对象数组，分别作为行数据和列数据，对页面中的和标签使用v-for循环渲染，从而生成表格。每个单元格都有一个行号和一个列树标志。鼠标按下时，获取鼠标按下时单元格的行数和列数，鼠标松开时，获取鼠标松开时单元格的行数和列数，然后先循环遍历行数据数组，所有选中的行数数据对象添加勾选，然后循环列数据数组，选中列数的所有数据对象添加勾选，页面使用v-时动态绑定对于和标签class类的for循环渲染，只有同时选中行和列时，cell才设置为选中状态，所以实际上只循环了30+30=60次，瞬间将复杂度从原来的O(n^2)降低到O(2n)。其实背后就是通过vue的diff算法快速计算出需要改变的dom元素，然后利用虚拟dom快速渲染到页面，大大提高了速度。这也让我真切地感受到了这些框架的强大（难怪它们这么受欢迎）。我的语言表达能力不是很强。不知道你有没有看懂我上面说的。不懂的可以看源码(^︹^)。打开本地xls文件的意外收获有一个jquery插件js-xlsx，可以帮助在线打开本地xls文件，并将xls文件转成json。将xls文件保存到本地使用xml的createElementNS创建指定命名空间的元素节点，然后使用js自带的Blob数据类型保存xls文件：varurlObject=window.URL||窗口.webkitURL||窗户;varexport_blob=newBlob(['test']);varsave_link=document.createElementNS("http://www.w3.org/1999/xhtml","a")varev=document.createEvent("MouseEvents");ev.initMouseEvent("click",true,false,window,0,0,0,0,0,false,false,false,false,0,null);save_link.href=urlObject.createObjectURL(export_blob);save_link.download='test.xls';save_link.dispatchEvent(ev);execCommand当HTML文档切换到designMode时，文档对象公开execCommand方法，该方法允许运行命令来操作可编辑区域的内容。详情查看MDN地址：https://developer.mozilla.org...AbsolutePosition设置元素的position属性为“absolute”（绝对）。BackColor设置或获取当前选中区域的背景颜色。目前不支持BlockDirLTR。当前不支持BlockDirRTL。粗体切换当前选定区域的粗体显示。当前不支持浏览模式。复制将当前选择复制到剪贴板。粘贴用剪贴板的内容覆盖当前选择（尚不支持）。...//示例document.execCommand("copy")document.execCommand("cut")document.execCommand('paste')window.getSelection()获取鼠标选中的文本clipboarddata.setData()手动设置剪贴板，一般用于用户复制内容时添加版权信息。