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??赡芎芏嗳硕贾肋@種方法了,反正我一開始很驚訝的,但是無(wú)奈,google的js文件是處理過的,看起來(lái)太累了。然后又去找ZOHO sheet,它的js文件只簡(jiǎn)單處理了一下,能debug,能看。
原來(lái),其在body上注冊(cè)了onkeydown事件,當(dāng)用戶按下ctrl+v鍵的時(shí)候,js將焦點(diǎn)轉(zhuǎn)移到一個(gè)textarea標(biāo)簽上,這樣,接下來(lái)的keyPress和keyUp事件就發(fā)生在textarea上了,自然而然的就相當(dāng)于用戶在textarea中復(fù)制了一下,然后,js再將焦點(diǎn)轉(zhuǎn)移,從textarea中將值取到。這樣就取到了剪貼板內(nèi)文本數(shù)據(jù)了。
下面是一個(gè)模仿ZOHO sheet實(shí)現(xiàn)的小例子。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(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ù),按照\(chéng)t,\n就可以分割得到格子和行信息了。但這樣只能得到簡(jiǎ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)列寬等一些簡(jiǎn)單的屬性。不知道誰(shuí)有方法能得到比較全的信息。
網(wǎng)上找了一圈,沒啥發(fā)現(xiàn)。終于想到去看看google sheet是怎么干的。
發(fā)現(xiàn)google sheet實(shí)現(xiàn)了excel的純文本的多數(shù)據(jù)格粘貼,沒有安全限制的需要,沒有使用flash??赡芎芏嗳硕贾肋@種方法了,反正我一開始很驚訝的,但是無(wú)奈,google的js文件是處理過的,看起來(lái)太累了。然后又去找ZOHO sheet,它的js文件只簡(jiǎn)單處理了一下,能debug,能看。
原來(lái),其在body上注冊(cè)了onkeydown事件,當(dāng)用戶按下ctrl+v鍵的時(shí)候,js將焦點(diǎn)轉(zhuǎn)移到一個(gè)textarea標(biāo)簽上,這樣,接下來(lái)的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>無(wú)標(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ù),按照\(chéng)t,\n就可以分割得到格子和行信息了。但這樣只能得到簡(jiǎ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)列寬等一些簡(jiǎn)單的屬性。不知道誰(shuí)有方法能得到比較全的信息。
相關(guān)文章
javascript 星級(jí)評(píng)分效果(手寫)
今天上午抽空隨手寫了個(gè)星級(jí)評(píng)分的效果,給大家分享下。由于水平有限,如有問題請(qǐng)指出;首先要準(zhǔn)備一張星星的圖片,灰色是默認(rèn)狀態(tài),黃色是選擇狀態(tài),需要的朋友可以參考下2012-12-12
JS獲取iframe中marginHeight和marginWidth屬性的方法
這篇文章主要介紹了JS獲取iframe中marginHeight和marginWidth屬性的方法,涉及javascript操作iframe屬性的技巧,并分析了marginHeight和marginWidth屬性的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
js實(shí)現(xiàn)無(wú)限瀑布流實(shí)例方法
在本篇文章里小編給大家整理的是關(guān)于js實(shí)現(xiàn)無(wú)限瀑布流實(shí)例方法以及相關(guān)代碼,需要的朋友們學(xué)習(xí)下吧。2019-09-09
詳解用Webpack與Babel配置ES6開發(fā)環(huán)境
這篇文章主要介紹了詳解用Webpack與Babel配置ES6開發(fā)環(huán)境,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
增強(qiáng)的 JavaScript 的 trim 函數(shù)的代碼
增強(qiáng)的 JavaScript 的 trim 函數(shù)的代碼...2007-08-08
CSS+Js遮罩效果的TAB及焦點(diǎn)圖片切換(推薦)
CSS+Js圖片切換技術(shù),類似的已有不少了,這一個(gè)使用了遮罩過渡的效果,同樣應(yīng)用到了TAB選項(xiàng)卡上,本頁(yè)面僅是為了演示,大家用時(shí)候把它拆分開來(lái),這個(gè)效果也對(duì)學(xué)習(xí)圖片效果制作很有幫助。2009-11-11
淺談js基礎(chǔ)數(shù)據(jù)類型和引用類型,深淺拷貝問題,以及內(nèi)存分配問題
下面小編就為大家?guī)?lái)一篇淺談js基礎(chǔ)數(shù)據(jù)類型和引用類型,深淺拷貝問題,以及內(nèi)存分配問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-09-09
javascript:history.go()和History.back()的區(qū)別及應(yīng)用
為提高用戶體驗(yàn)度,可能會(huì)使用到刷新 前進(jìn) 后退等相關(guān)更能,本文將以此問題詳細(xì)介紹javascript:history.go()和History.back()的區(qū)別及應(yīng)用,需要的朋友可以參考下2012-11-11
簡(jiǎn)單的仿Flash文字動(dòng)畫(兼容Mozilla)
簡(jiǎn)單的仿Flash文字動(dòng)畫(兼容Mozilla)...2007-01-01

