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 相关文章推荐
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 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缓存技术的使用说明
2011/08/06 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
Yii框架登录流程分析
2014/12/03 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
Python程序暂停的正常处理方法
2019/11/07 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
值传递还是引用传递
2015/02/08 面试题
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
主题党日活动总结
2014/07/08 职场文书
经典演讲稿开场白
2014/08/25 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python