html5读取剪切板内容,实践笔记：js解析剪切板里的excel内容

左手的ㄟ右手 2022-10-06 09:56 669阅读 0赞

这次记录的是昨晚一个想法：把excel内容复制到剪切板并转成自己想要的json格式，核心是要把excel内容转json，这部分主要看excel的格式和json如何业务的映射，不展开。倒是通过实践，收获了剪切板的一些知识点。

注：因为只是为了自己的小工具实现，不考虑兼容，在chrome下实践

整个步骤是：

从一封有内容的excel里，选中内容，ctrl+c复制到剪切板(刚好我的内容就是整张表，ctrl+A就可以选中内容)

粘贴到web页面，js监听paste事件，从剪切板对象里获得复制的excel内容(含格式)

将内容解析处理成自己的格式【扩展补充】

这里主要可以分为三点：

1. 粘贴事件和剪切板

document.addEventListener('paste', event => \{

// event里的clipboardData对象

console.log(event.clipboardData)

\})

粘贴事件触发时，可以从event里获取到clipboardData

不过里面使用时还用了window.clipboardData，我在chrome和codepen下试验，都没获取到内容。

2. 剪切板里的内容格式

在上一部分的代码打印到控制台，会有个疑惑，就是控制台打出来一个DataTransfer对象，但其实这个对象在控制台展开时属性不是没有值就是空数组，很懵逼。

直到我往里面console属性内容，才找到。

在这个对象里，getData是它的常用方法，用于获取数据内容，它需要接受一个DOMString的参数。

一般常用的是粘贴纯文本，纯文本 getData('text') 即可获得。

但我要的是excel的格式，一开始并不知道excel是啥格式，但是从excel拷贝再粘贴回excel，格式依然保留，所以想着剪切板应该还保留原内容的格式，所以就尝试下。

通过遍历打印出DataTransfer对象的types属性，可以能知晓

document.addEventListener('paste', event => \{

event.clipboardData.types.map(type=>\{console.log(type)\})

\})

types有三个值：text/plain,text/html,Files

于是用types的‘text/html’，和getData一试，果然拿到了带格式的内容，实际上是一段html代码字符串

大致如下

...

...

通过观察得知，想要的内容就是html代码里的table，接下来要转格式就好办了，搞定解析html字符串，用选择器的方式获取单元格内容就差不多了。

3. 如何解析html字符串

这里着实耗费了我不少时间，后面找到了DOMParser,原来原生就支持解析html字符串>>

通过 (new DOMParser()).parseFromString，将字符串转为DOM

const html = event.clipboardData.getData('text/html');

const $doc = new DOMParser().parseFromString(html,'text/html');

// 加载所有的行

const $trs = Array.from($doc.querySelectorAll('table tr'));

于是就可以愉快的querySelectorAll了。

总结

经过一段小探索，完成了自己的需求，收获了三个关键字知识点： clipboardData, DataTransfer, DOMParser。

每个都值得好好挖掘~

![b739ec46bb5c46d9c0aa4ce35ba1ea56.png][]

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

\[实践笔记：js解析剪切板里的excel内容\]http://www.zyiz.net/tech/detail-108892.html

[b739ec46bb5c46d9c0aa4ce35ba1ea56.png]: /images/20221005/fccedd831a664de18d70f3d8f67b6e25.png

发表评论取消回复

表情：

评论列表（有 0 条评论，669人围观）

还没有评论，来说两句吧...

相关阅读

相关安卓复制到剪切板,以及获取剪切板内容

import android.content.ClipData; import android.content.ClipboardManager; im

浅浅的花香味﹌/ 2023年10月05日 18:27/ 0 赞/ 136 阅读

相关 c# 获取剪切板内容

1 //IDataObject iData = Clipboard.GetDataObject(); //判断是否有Text

墨蓝/ 2023年10月05日 14:52/ 0 赞/ 166 阅读

相关 Python - Python 操作剪切板，从剪切板读取内容

文章目录 Python - Python 操作剪切板，从剪切板读取内容相关内容：Python 实用内容 1、引入模块

秒速五厘米/ 2023年02月21日 06:22/ 0 赞/ 151 阅读

相关 js复制文本内容到剪切板

<script type="text/javascript"> function copyUrl2() { var Ur

淡淡的烟草味﹌/ 2022年11月10日 05:30/ 0 赞/ 385 阅读

相关 html5读取剪切板内容,实践笔记：js解析剪切板里的excel内容

这次记录的是昨晚一个想法：把excel内容复制到剪切板并转成自己想要的json格式，核心是要把excel内容转json，这部分主要看excel的格式和json如何业务的映射，不

左手的ㄟ右手/ 2022年10月06日 09:56/ 0 赞/ 670 阅读

相关 JS设置剪切板内容

function setClipboardText(value) { const text = document.createElement('text

古城微笑少年丶/ 2022年10月04日 15:59/ 0 赞/ 369 阅读

相关 python读取剪切板内容

python读取剪切板内容 import win32clipboard as w import win32con def getTe

怼烎@/ 2022年08月20日 02:27/ 0 赞/ 349 阅读

相关查看剪切板的内容！

using System; using System.Collections.Generic; using System.ComponentMode

╰半夏微凉°/ 2022年06月02日 04:17/ 0 赞/ 405 阅读

相关 JS复制内容到剪切板

Html <input id="demoInput" v-model="url.pcPlayUrl" > <el-button

深藏阁楼爱情的钟/ 2022年04月06日 01:36/ 0 赞/ 466 阅读

相关清空剪切板内容

今天发现复制的内容不能粘贴,想了一下,可能粘贴板的内容已满,于是我打开命令框(WIN+R)在命令框输入Clipbrd,打开剪贴板查看器 ,编辑-删除,果然行了. 转载于:ht

以你之姓@/ 2022年01月10日 22:23/ 0 赞/ 558 阅读