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 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 Javascript
js数组的基本使用总结
Jan 18 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
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
jquery编写日期选择器
2017/03/16 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
Python实现的ini文件操作类分享
2014/11/20 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python中count函数简单用法
2020/01/05 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
大学生实习思想汇报
2014/01/12 职场文书
小学教师事迹材料
2014/01/13 职场文书
采购主管岗位职责
2014/02/01 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
社区节水倡议书
2015/04/29 职场文书
采购员工作总结范文
2015/08/12 职场文书
导游词之襄阳古城
2019/09/27 职场文书
导游词之南京中山陵
2019/11/27 职场文书
Nginx利用Logrotate实现日志分割
2022/05/20 Servers
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server