JS 巧妙获取剪贴板数据 Excel数据的粘贴


Posted in Javascript onJuly 09, 2009

另外的方法就是用flash了,它可以避开浏览器的安全限制,但是system类中只有set的方法,另外的clipboard类中倒是能访问到,但是似乎需要flash10的版本支持。

网上找了一圈,没啥发现。终于想到去看看google sheet是怎么干的。
发现google sheet实现了excel的纯文本的多数据格粘贴,没有安全限制的需要,没有使用flash。可能很多人都知道这种方法了,反正我一开始很惊讶的,但是无奈,google的js文件是处理过的,看起来太累了。然后又去找ZOHO sheet,它的js文件只简单处理了一下,能debug,能看。
原来,其在body上注册了onkeydown事件,当用户按下ctrl+v键的时候,js将焦点转移到一个textarea标签上,这样,接下来的keyPress和keyUp事件就发生在textarea上了,自然而然的就相当于用户在textarea中复制了一下,然后,js再将焦点转移,从textarea中将值取到。这样就取到了剪贴板内文本数据了。
下面是一个模仿ZOHO sheet实现的小例子。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</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事件发生了再去处理数据 
            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的文本数据,按照\t,\n就可以分割得到格子和行信息了。但这样只能得到简单的纯文本的excel值,格子的样式都弄不到。但我发现一个方法,当向iframe的document中复制的时候(就是在线编辑器的实现方式),这样能出现一些样式信息,IE中特别全,估计是因为自己家的产品自己能解析的缘故,FF和Chrome就只能得到行号列宽等一些简单的属性。不知道谁有方法能得到比较全的信息。
Javascript 相关文章推荐
JS实现随机化快速排序的实例代码
Aug 01 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
javascript自执行函数
Feb 10 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
angularjs 缓存的使用详解
Mar 19 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
JS实现滑动导航效果
Jan 14 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
js实现磁性吸附的示例
Oct 26 Javascript
JavaScript 继承的实现
Jul 09 #Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 #Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 #Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 #Javascript
javascript xml为数据源的下拉框控件
Jul 07 #Javascript
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 #Javascript
javascript 选择文件夹对话框(web)
Jul 07 #Javascript
You might like
Syphon 秘笈
2021/03/03 冲泡冲煮
PHP代码实现表单数据验证类
2015/07/28 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
js DOM的学习笔记
2011/12/22 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
python解析含有重复key的json方法
2019/01/22 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
python 6行代码制作月历生成器
2020/09/18 Python
详解Python中的Lock和Rlock
2021/01/26 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
ajax是什么及其工作原理
2012/02/08 面试题
大学生最常用的自我评价
2013/12/07 职场文书
产品促销活动策划书
2014/01/15 职场文书
通信生自我鉴定
2014/01/18 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
会议主持词开场白
2015/05/28 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
教你怎么用python实现字符串转日期
2021/05/24 Python
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB