网页版模拟Excel

近来公司闲的dan疼，非要模拟Excel做一个网页版的Excel，刚最先据说要做这么一个东西的时刻霎时以为公司指导高(sang)瞻(xin)远(bing)瞩(kuang)，只能头铁的接下了，那就最先干。实在重要目标是为了能连上本身的数据库，轻易支配表格，厥后发明完成本钱太高，做了一个前端DEMO就坚决摒弃了，然则这个DEMO照样有点意义，发开DEMO历程当中有些心得与收成。

github地点

https://github.com/zhuqitao/E&＃8230;

完成功用

• 字体、字号、色彩、背景色、加粗、斜体等字体款式基础支配功用
• 鼠标拖拽多选单元格
• 摆布居中规划
• 兼并、拆分单元格
• 插进去函数（没有盘算功用的函数，只是静态增加函数名）
• 当地翻开excel（.xls）文件

截图

先看看现在的结果图：

转动题目

指导说先做一个demo看看结果，那就亮出咱家的看家本领吧html+css+js三剑客，不就是表格吗，html填上table，修修款式，页面结果就ok了。

第一个遇到的题目就是转动题目，看上面的截图就晓得实在这是一种表格表头牢固，表格第一列牢固，其他部份转动的结果，然则实在没有那末简朴，另有一个题目是垂直转动的时刻第一行（表头）不动，然则第一列得随着动啊，程度转动亦是云云，这可怎样办啊，这类状况没遇到过啊，然则得处置惩罚啊。

不晓得的网友们能够斟酌斟酌怎样做？ 晓得怎样处置惩罚这类状况的也别喷博主菜。

末了的处置惩罚要领就是写了三个table，一个放表头（第一行），一个放第一列，一个放表格重要内容，看下图：

table1安排表头（A,B,C），table2安排第一列，table3安排中心支配地区，把table1、2设置为overflow:hidden，只要table3能够转动，监听table3的转动事宜，猎取table3的scrollLeft和scrollTop然后离别给table1、table2的scrollLeft和scrollTop赋值。

鼠标按下拖拽多选单元格

这个是本DEMO唯一的亮点了（个人认为）。

表格现在定下的是30*30的表格。一最先的主意是监听鼠标按下（mousedown）事宜猎取鼠标按下时的位置，然后再监听鼠标挪动事宜（mousemove），猎取鼠标当前的位置，然后依据当前位置和按下时位置画一个矩形，轮回遍历一切的单元格元素，推断单元格是不是在矩形内，然后给选中的单元格增加active类。

如许做的结果是页面异常卡，由于鼠标挪动历程会屡次触发鼠标挪动事宜（mousemove），会屡次举行单元格元素轮回遍历。 厥后就不在鼠标挪动事宜内里举行单元格遍历支配，在鼠标松开事宜内里遍历一切的单元格元素。

如许确切快了一些，然则另有一个题目上面两种要领都没处置惩罚的题目，就是假如挑选了许多元素（比方100个），在遍历单元格元素的时刻须要对着100个元素支配增加active类，实在js支配支配DOM是比较耗时的，这里也没有想到什么好的DOM支配缓存的要领。

就在束手无策的时刻想到了现在盛行的假造dom框架（react、vue等），坚决运用了vue。在vue实例里建立两个对象数组，离别作为行数据和列数据，页面上离别对和标签运用v-for轮回衬着，如许就可以天生一张表格。每一个单元格都给加上行数和列树标志。

在鼠标按下猎取鼠标按下时地点单元格的行数和列数，鼠标松开时猎取松开时地点单元格的行数和列数，然后先轮回行数据的数组，一切在选中的行数的数据对象增加选中标志，然后再轮回列数据的数组，一切在选中的列数的数据对象增加选中标志，在页面临和标签运用v-for轮回衬着时动态绑定class类，只要行和列同时被选中，单元格才设置为选中状况，如许实在只轮回了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文件：

var urlObject = window.URL || window.webkitURL || window; var export_blob = new Blob(['test']); var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a") var ev = 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&＃8230;

AbsolutePosition 设定元素的 position 属性为“absolute”(相对)。
BackColor 设置或猎取当前选中区的背景色彩。
BlockDirLTR 现在还没有支撑。
BlockDirRTL 现在还没有支撑。
Bold 切换当前选中区的粗体显现与否。
BrowseMode 现在还没有支撑。
Copy 将当前选中区复制到剪贴板。
Paste 用剪贴板内容掩盖当前选中区（现在还没有支撑）。
...
// 例子
document.execCommand("copy")
document.execCommand("cut")
document.execCommand('paste')

• window.getSelection()

猎取鼠标选中的文本

• clipboarddata.setData()

手动设置剪切板，平常用于用户复制内容时增加版权信息。