快捷導(dǎo)航

JS 巧妙獲取剪貼板數(shù)據(jù) Excel數(shù)據(jù)的粘貼

更新時(shí)間：2009年07月09日 22:50:38 作者：

最近需要在瀏覽器端實(shí)現(xiàn)excel數(shù)據(jù)的粘貼，一開始去找獲取剪貼板數(shù)據(jù)的方法。但是在瀏覽器端，JS去取是受安全限制的。

另外的方法就是用flash了，它可以避開瀏覽器的安全限制，但是system類中只有set的方法，另外的clipboard類中倒是能訪問到，但是似乎需要flash10的版本支持。

網(wǎng)上找了一圈，沒啥發(fā)現(xiàn)。終于想到去看看google sheet是怎么干的。
發(fā)現(xiàn)google sheet實(shí)現(xiàn)了excel的純文本的多數(shù)據(jù)格粘貼，沒有安全限制的需要，沒有使用flash。可能很多人都知道這種方法了，反正我一開始很驚訝的，但是無奈，google的js文件是處理過的，看起來太累了。然后又去找ZOHO sheet，它的js文件只簡單處理了一下，能debug，能看。
原來，其在body上注冊(cè)了onkeydown事件，當(dāng)用戶按下ctrl+v鍵的時(shí)候，js將焦點(diǎn)轉(zhuǎn)移到一個(gè)textarea標(biāo)簽上，這樣，接下來的keyPress和keyUp事件就發(fā)生在textarea上了，自然而然的就相當(dāng)于用戶在textarea中復(fù)制了一下，然后，js再將焦點(diǎn)轉(zhuǎn)移，從textarea中將值取到。這樣就取到了剪貼板內(nèi)文本數(shù)據(jù)了。
下面是一個(gè)模仿ZOHO sheet實(shí)現(xiàn)的小例子。

復(fù)制代碼代碼如下:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無標(biāo)題文檔</title> 
<script type="text/javascript"><!-- 
    function cellkeydown(event) { 
        if (event.ctrlKey && event.keyCode == 86) { 
            var ss = document.getElementById("textArea"); 
            ss.focus(); 
            ss.select(); 
            // 等50毫秒，keyPress事件發(fā)生了再去處理數(shù)據(jù) 
            setTimeout("dealwithData()",50); 
        }     
    } 
    function dealwithData(event) { 
            var ss = document.getElementById("textArea"); 
            alert(ss.value); 
            ss.blur(); 
    } 
// --></script> 
</head> 
<body onkeydown="return cellkeydown(event)"> 
<div> 
    <textarea id="textArea">

獲得的Excel的文本數(shù)據(jù)，按照\t，\n就可以分割得到格子和行信息了。但這樣只能得到簡單的純文本的excel值，格子的樣式都弄不到。但我發(fā)現(xiàn)一個(gè)方法，當(dāng)向iframe的document中復(fù)制的時(shí)候（就是在線編輯器的實(shí)現(xiàn)方式），這樣能出現(xiàn)一些樣式信息，IE中特別全，估計(jì)是因?yàn)樽约杭业漠a(chǎn)品自己能解析的緣故，F(xiàn)F和Chrome就只能得到行號(hào)列寬等一些簡單的屬性。不知道誰有方法能得到比較全的信息。

您可能感興趣的文章: