作者:Wo-们是平行线 | 来源:互联网 | 2022-01-24 17:43
前言
这次记录的是昨晚一个想法:把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内容的资料请关注其它相关文章!
推荐阅读
-
本项目旨在优化可转债数据的智能抓取与分析平台。通过爬取集思录上的可转债信息(排除已发布赎回的债券),并结合安道全教授提出的三条安全线投资策略,新增了建仓线、加仓线和重仓线,以提供更精准的投资建议。 ...
[详细]
蜡笔小新 2024-10-30 17:40:17
-
作为140字符的开创者,Twitter看似简单却异常复杂。其简洁之处在于仅用140个字符就能实现信息的高效传播,甚至在多次全球性事件中超越传统媒体的速度。然而,为了支持2亿用户的高效使用,其背后的技术架构和系统设计则极为复杂,涉及高并发处理、数据存储和实时传输等多个技术挑战。 ...
[详细]
蜡笔小新 2024-10-31 17:58:20
-
-
本文介绍了使用 Python 编程语言高效抓取微博文本和动态网页图像数据的方法。通过详细的示例代码,展示了如何利用爬虫技术获取微博内容和动态图片,为数据采集和分析提供了实用的技术支持。对于对网络数据抓取感兴趣的读者,本文具有较高的参考价值。 ...
[详细]
蜡笔小新 2024-10-31 14:48:38
-
本文深入探讨了 HTML 中的 `margin` 属性,详细解析了其基本特性和应用场景。文章不仅介绍了 `margin` 的基本概念,还重点讨论了垂直外边距合并现象,并分析了 `margin` 在块级元素与内联元素中的不同表现。通过实例和代码示例,帮助读者全面理解 `margin` 的使用技巧和常见问题。 ...
[详细]
蜡笔小新 2024-10-30 15:08:31
-
本教程深入探讨了Django框架中Ajax请求的核心概念与实用技巧,帮助开发者掌握异步数据交互的方法,提升Web应用的响应速度和用户体验。通过实例解析,详细介绍了如何在Django项目中高效实现Ajax请求,涵盖从基础配置到复杂场景的应用。 ...
[详细]
蜡笔小新 2024-10-28 17:50:02
-
在前一篇文章中,我们介绍了如何使用Requests库发送GET请求。本文将深入探讨如何通过Requests库发送POST请求,包括参数格式、请求封装等关键技巧,并通过“历史上的今天”API实例进行详细说明。 ...
[详细]
蜡笔小新 2024-10-27 15:02:24
-
本文介绍了如何通过掌握 IScroll 技巧来实现流畅的上拉加载和下拉刷新功能。首先,需要按正确的顺序引入相关文件:1. Zepto;2. iScroll.js;3. scroll-probe.js。此外,还提供了完整的代码示例,可在 GitHub 仓库中查看。通过这些步骤,开发者可以轻松实现高效、流畅的滚动效果,提升用户体验。 ...
[详细]
蜡笔小新 2024-10-31 17:28:44
-
在智能制造领域,生产数据通过先进的采集设备收集,并利用时序数据库或关系型数据库进行高效存储。这些数据经过处理后,通过可视化数据大屏呈现,为生产车间、生产控制中心以及管理层提供实时、精准的信息支持,助力不同应用场景下的决策优化和效率提升。 ...
[详细]
蜡笔小新 2024-10-31 16:58:11
-
本文旨在实现Ceph块存储中RBD块设备的高效创建与安全删除功能。开发环境为CentOS 7,使用 IntelliJ IDEA 进行开发。首先介绍了 librbd 的基本概念及其在 Ceph 中的作用,随后详细描述了项目 Gradle 配置的优化过程,确保了开发环境的稳定性和兼容性。通过这一系列步骤,我们成功实现了 RBD 块设备的快速创建与安全删除,提升了系统的整体性能和可靠性。 ...
[详细]
蜡笔小新 2024-10-31 15:11:07
-
在信息爆炸的时代,提升阅读体验显得尤为重要。简悦SimpRead等精选Chrome扩展工具,不仅能够净化页面,去除干扰元素,还能通过优化排版和字体,为用户提供更加舒适、沉浸式的阅读环境,让文字内容更加赏心悦目,帮助读者更好地吸收信息。 ...
[详细]
蜡笔小新 2024-10-25 16:04:47
-
为了满足大量图像素材的需求以支持机器学习项目,本文介绍了一种基于Java语言开发的百度图片爬虫工具,该工具能够高效地抓取并下载百度图片中的资源。文章首先展示了爬虫运行的效果图,并详细阐述了其工作原理和技术实现路径,重点解析了如何通过分析百度图片的网页结构来实现精准抓取。此外,还讨论了在实际应用中可能遇到的问题及解决方案。 ...
[详细]
蜡笔小新 2024-10-24 18:25:50
-
本项目基于 ZXing 封装了适用于 SSR 和 WASM 的 Blazor 扫码组件,能够高效地集成到 Blazor 应用中,并支持通过手机或桌面电脑的摄像头进行扫码操作。该组件库不仅简化了开发流程,还提供了高性能的扫码体验。项目地址:[链接] ...
[详细]
蜡笔小新 2024-10-24 13:09:48
-
定义Function类型:1functionsum(num1,num2){return
num1+num2;}2varsumfunction(num1,num2){returnn ...
[详细]
蜡笔小新 2024-10-23 18:32:08
-
(1)搜狗搜索人物实战
importrequestsurlhttps:www.sogou.comweb?query李荣浩
#首先我们需要观察在搜狗输入李 ...
[详细]
蜡笔小新 2024-10-23 10:44:42
-
Silverlight拖动复制控件,就是将控件从一个容器中向另一个容器中拖动时,不是移动控件而把该控件到另一个容器中。这种情形在程序中经常遇到ÿ ...
[详细]
蜡笔小新 2024-10-22 14:36:12
-