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 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
js select option对象小结
Dec 20 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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
php实现面包屑导航例子分享
2015/12/19 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
python tkinter界面居中显示的方法
2018/10/11 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Django中提示消息messages的设置方式
2019/11/15 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
大学生专科毕业生自我评价
2013/11/17 职场文书
中学教师管理制度
2014/01/14 职场文书
四年级下册教学反思
2014/02/01 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
消费者投诉书范文
2015/07/02 职场文书
PHP控制循环操作的时间
2021/04/01 PHP