摘要：鼠標(biāo)按下拖拽多選單元格這個(gè)是本唯一的亮點(diǎn)了個(gè)人認(rèn)為。這樣做的結(jié)果是頁面非常卡，因?yàn)槭髽?biāo)移動(dòng)過程會(huì)多次觸發(fā)鼠標(biāo)移動(dòng)事件，會(huì)多次進(jìn)行單元格元素循環(huán)遍歷。

最近公司閑的dan疼，非要模仿Excel做一個(gè)網(wǎng)頁版的Excel，剛開始聽說要做這么一個(gè)東西的時(shí)候瞬間覺得公司領(lǐng)導(dǎo)高(sang)瞻(xin)遠(yuǎn)(bing)矚(kuang)，只能頭鐵的接下了，那就開始干。其實(shí)主要目的是為了能連上自己的數(shù)據(jù)庫，方便操作表格，后來發(fā)現(xiàn)實(shí)現(xiàn)成本太高，做了一個(gè)前端DEMO就果斷放棄了，但是這個(gè)DEMO還是有點(diǎn)意思，發(fā)開DEMO過程中有些心得與收獲。

https://github.com/zhuqitao/E...

字體、字號(hào)、顏色、背景色、加粗、斜體等字體樣式基本操作功能

鼠標(biāo)拖拽多選單元格

左右居中布局

合并、拆分單元格

插入函數(shù)（沒有計(jì)算功能的函數(shù)，只是靜態(tài)添加函數(shù)名）

本地打開excel（.xls）文件

先看看目前的效果圖：

領(lǐng)導(dǎo)說先做一個(gè)demo看看效果，那就亮出咱家的看家本領(lǐng)吧html+css+js三劍客，不就是表格嗎，html填上table，修修樣式，頁面效果就ok了。

第一個(gè)碰到的問題就是滾動(dòng)問題，看上面的截圖就知道其實(shí)這是一種表格表頭固定，表格第一列固定，其他部分滾動(dòng)的效果，但是其實(shí)沒有那么簡(jiǎn)單，還有一個(gè)問題是垂直滾動(dòng)的時(shí)候第一行（表頭）不動(dòng)，但是第一列得跟著動(dòng)啊，水平滾動(dòng)亦是如此，這可怎么辦啊，這種情況沒遇到過啊，但是得解決啊。

不知道的網(wǎng)友們可以考慮考慮怎么做？ 知道怎么處理這種情況的也別噴博主菜。

最后的解決方法就是寫了三個(gè)table，一個(gè)放表頭（第一行），一個(gè)放第一列，一個(gè)放表格主要內(nèi)容，看下圖：

table1放置表頭（A,B,C），table2放置第一列，table3放置中間操作區(qū)域，把table1、2設(shè)置為overflow:hidden，只有table3可以滾動(dòng)，監(jiān)聽table3的滾動(dòng)事件，獲取table3的scrollLeft和scrollTop然后分別給table1、table2的scrollLeft和scrollTop賦值。

這個(gè)是本DEMO唯一的亮點(diǎn)了（個(gè)人認(rèn)為）。

表格目前定下的是30*30的表格。一開始的想法是監(jiān)聽鼠標(biāo)按下（mousedown）事件獲取鼠標(biāo)按下時(shí)的位置，然后再監(jiān)聽鼠標(biāo)移動(dòng)事件（mousemove），獲取鼠標(biāo)當(dāng)前的位置，然后根據(jù)當(dāng)前位置和按下時(shí)位置畫一個(gè)矩形，循環(huán)遍歷所有的單元格元素，判斷單元格是否在矩形內(nèi)，然后給選中的單元格添加active類。

這樣做的結(jié)果是頁面非常卡，因?yàn)槭髽?biāo)移動(dòng)過程會(huì)多次觸發(fā)鼠標(biāo)移動(dòng)事件（mousemove），會(huì)多次進(jìn)行單元格元素循環(huán)遍歷。 后來就不在鼠標(biāo)移動(dòng)事件里面進(jìn)行單元格遍歷操作，在鼠標(biāo)松開事件里面遍歷所有的單元格元素。

這樣確實(shí)快了一些，但是還有一個(gè)問題上面兩種方法都沒解決的問題，就是如果選擇了很多元素（比如100個(gè)），在遍歷單元格元素的時(shí)候需要對(duì)著100個(gè)元素操作添加active類，其實(shí)js操作操作DOM是比較耗時(shí)的，這里也沒有想到什么好的DOM操作緩存的方法。

就在一籌莫展的時(shí)候想到了目前流行的虛擬dom框架（react、vue等），果斷使用了vue。在vue實(shí)例里創(chuàng)建兩個(gè)對(duì)象數(shù)組，分別作為行數(shù)據(jù)和列數(shù)據(jù)，頁面上分別對(duì)和標(biāo)簽使用v-for循環(huán)渲染，這樣就能生成一張表格。每個(gè)單元格都給加上行數(shù)和列樹標(biāo)志。

在鼠標(biāo)按下獲取鼠標(biāo)按下時(shí)所在單元格的行數(shù)和列數(shù)，鼠標(biāo)松開時(shí)獲取松開時(shí)所在單元格的行數(shù)和列數(shù)，然后先循環(huán)行數(shù)據(jù)的數(shù)組，所有在選中的行數(shù)的數(shù)據(jù)對(duì)象添加選中標(biāo)志，然后再循環(huán)列數(shù)據(jù)的數(shù)組，所有在選中的列數(shù)的數(shù)據(jù)對(duì)象添加選中標(biāo)志，在頁面對(duì)和標(biāo)簽使用v-for循環(huán)渲染時(shí)動(dòng)態(tài)綁定class類，只有行和列同時(shí)被選中，單元格才設(shè)置為選中狀態(tài)，這樣其實(shí)只循環(huán)了30+30=60次，瞬間把復(fù)雜度有原來的O(n^2)降低到O(2n)。

其實(shí)背后是通過vue的diff算法快速的計(jì)算出需要改變的dom元素，然后利用虛擬dom快速渲染到頁面上，速度大大提升。這也讓我真實(shí)的感受到這些框架的威力（怪不得這么火）。

我的語言表達(dá)能力不是很強(qiáng)，上面說的大家不知道有沒有聽明白，沒明白的可以看看源代碼(^︹^)。?

打開本地xls文件

有一款jquery插件js-xlsx可以幫助在線打開本地xls文件，并把xls文件轉(zhuǎn)成json。

本地保存xls文件

利用xml的createElementNS創(chuàng)建帶有指定命名空間的元素節(jié)點(diǎn)，再利用js自帶Blob數(shù)據(jù)類型保存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

當(dāng)一個(gè)HTML文檔切換到設(shè)計(jì)模式 designMode時(shí)，文檔對(duì)象暴露 execCommand 方法，該方法允許運(yùn)行命令來操縱可編輯區(qū)域的內(nèi)容。詳情查看MDN地址：https://developer.mozilla.org...

AbsolutePosition 設(shè)定元素的 position 屬性為“absolute”(絕對(duì))。
BackColor 設(shè)置或獲取當(dāng)前選中區(qū)的背景顏色。
BlockDirLTR 目前尚未支持。
BlockDirRTL 目前尚未支持。
Bold 切換當(dāng)前選中區(qū)的粗體顯示與否。
BrowseMode 目前尚未支持。
Copy 將當(dāng)前選中區(qū)復(fù)制到剪貼板。
Paste 用剪貼板內(nèi)容覆蓋當(dāng)前選中區(qū)（目前尚未支持）。
...

// 例子
document.execCommand("copy")
document.execCommand("cut")
document.execCommand("paste")

window.getSelection()

獲取鼠標(biāo)選中的文本

clipboarddata.setData()

手動(dòng)設(shè)置剪切板，一般用于用戶復(fù)制內(nèi)容時(shí)添加版權(quán)信息。