当前位置: 开发笔记 > 前端 > 正文

如何用JS解析剪切板里的excel内容

作者：Wo-们是平行线 | 来源：互联网 | 2022-01-24 17:43

这篇文章主要介绍了如何用JS解析剪切板里的excel内容，对解析excel感兴趣的同学，可以参考下

前言

这次记录的是昨晚一个想法：把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了。

以上就是如何用JS解析剪切板里的excel内容的详细内容，更多关于JS解析剪切板里的excel内容的资料请关注其它相关文章！

推荐阅读

html
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
build
使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例

本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤，可以获取到网站首页的新闻数据。代码示例使用Python编写，并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]

蜡笔小新 2023-12-12 19:16:21
html
Android 新闻App的本地服务器搭建教程

本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]

蜡笔小新 2023-12-14 17:15:19
js
AJAX的POST请求及实现数据修改功能的方法

本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术，可以实现在输入某个id后，通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用，以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况，并解释了JavaScript等待服务器响应的机制。 ... [详细]

蜡笔小新 2023-12-14 16:12:01
layout
android listview OnItemClickListener失效原因

最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 14:25:50
js
Alink回归预测的不完善问题及期待

本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]

蜡笔小新 2023-12-14 14:25:33
js
Hibernate基础映射

在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]

蜡笔小新 2023-12-14 10:57:47
js
SpringBoot集成前端模版（thymeleaf）的配置步骤

本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]

蜡笔小新 2023-12-14 10:11:46
js
Java验证码——kaptcha的使用配置及样式

本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]

蜡笔小新 2023-12-13 13:58:25
html
南邮ctf-web的writeup

本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]

蜡笔小新 2023-12-13 10:58:55
html
开发笔记：使用Junit和黄瓜进行自动化测试步骤缺失

本文由编程笔记小编整理，主要介绍了使用Junit和黄瓜进行自动化测试中步骤缺失的问题。文章首先介绍了使用cucumber和Junit创建Runner类的代码，然后详细说明了黄瓜功能中的步骤和Steps类的实现。本文对于需要使用Junit和黄瓜进行自动化测试的开发者具有一定的参考价值。摘要长度：187字。 ... [详细]

蜡笔小新 2023-12-11 20:20:32
scroll
如何在HTML中获取鼠标的当前位置

本文介绍了在HTML中获取鼠标当前位置的三种方法，分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]

蜡笔小新 2023-12-11 13:04:00
html
响应式页面的概述和实现方式

本文介绍了响应式页面的概念和实现方式，包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点，提出了选择方案的建议。同时，对于响应式页面的需求和背景进行了讨论，解释了为什么需要响应式页面。 ... [详细]

蜡笔小新 2023-12-11 12:37:10
html
如何使用Word和Chrome翻译PDF文件

本文介绍了使用Word和Chrome翻译PDF文件的步骤，包括用Word打开PDF、另存为HTML文件以及用Chrome打开HTML并进行翻译的方法。通过这些步骤，您可以方便地将PDF文件翻译成其他语言。详细的操作步骤将在本文中进行说明。 ... [详细]

蜡笔小新 2023-12-11 09:59:46
js
ECMA262规定typeof操作符的返回值和instanceof的使用方法

本文介绍了ECMA262规定的typeof操作符对不同类型的变量的返回值，以及instanceof操作符的使用方法。同时还提到了在不同浏览器中对正则表达式应用typeof操作符的返回值的差异。 ... [详细]

蜡笔小新 2023-12-10 17:31:51

Wo-们是平行线

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章