本文介绍了一种利用 JavaScript 获取剪贴板中 Excel 数据的巧妙方法。通过监听键盘事件,将焦点转移到隐藏的 textarea 元素,从而绕过浏览器安全限制直接读取纯文本数据。该方法无需 Flash 插件,适用于现代 Web 应用中的数据粘贴场景。
JS 巧妙获取剪贴板数据 Excel数据的粘贴
另一种方法是使用 Flash,它可以绕过浏览器的安全限制。然而,System 类中仅提供 set 方法,而 Clipboard 类虽然可以访问数据,但似乎需要 Flash 10 版本的支撑。
经过网络搜索未找到相关解决方案后,我决定研究 Google Sheets 的实现方式。
Google Sheets 实现了 Excel 纯文本的多单元格粘贴,无需安全限制且未使用 Flash。尽管这可能是一种常见做法,但我最初对此感到惊讶。由于 Google 的 JavaScript 文件经过处理难以阅读,我转而研究 ZOHO Sheets,其 JavaScript 文件仅经过简单处理,便于调试和查看。
其核心机制是在 body 上注册 onkeydown 事件。当用户按下 Ctrl+V 键时,JavaScript 将焦点转移到一个 textarea 标签上。这样,后续的 keyPress 和 keyUp 事件便发生在 textarea 上,相当于在 textarea 中执行了复制操作。随后,JavaScript 将焦点移回,并从 textarea 中获取值,从而成功读取剪贴板内的文本数据。
以下是一个模仿 ZOHO Sheets 实现的小例子。
代码如下:
<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就只能得到行号列宽等一些简单的属性。不知道谁有方法能得到比较全的信息。