html粘贴excel内容,如何用JS解析剪切板里的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粘贴excel内容,如何用JS解析剪切板里的excel内容相关推荐
- html5读取剪切板 内容,实践笔记:js解析剪切板里的excel内容
这次记录的是昨晚一个想法:把excel内容复制到剪切板并转成自己想要的json格式,核心是要把excel内容转json,这部分主要看excel的格式和json如何业务的映射,不展开.倒是通过实践,收获 ...
- js获取剪切板内容(企业微信内嵌网页)
js获取剪切板内容 应用场景 剪切板内容获取 腾讯会议获取会议时间.会议链接和会议号 更新========================= 企业微信页面剪切板内容读取 iPhone无法进入页面 零宽 ...
- js访问剪切板,先处理需要粘贴的文本后,再进行文本粘贴
需求: 在一些查询input输入时,用户可能会从某个地方复制查询数据,然后粘贴到查询表单中,这时可能会造成复制的数据有空格,而恰巧你点表单又进行了位数设置,则复制出来的数据可能会因此少一位. 我的解决 ...
- react 从剪切板里粘贴图片并使用WEditor富文本展示
具体实现思路: 使用原生粘贴方法获取到粘贴版的内容然后调用富文本根据光标插入内容的方法 使用到的知识点以及api: 1.调用wangeditor富文本根据光标插入内容的api: this.editor ...
- 如何对Windows剪切板里的内容进行取证分析 Windows剪切板取证
前言 无论是在现实中对设备进行取证分析,还是在ctf中做取证类的题目,剪切板里的内容都需要去查看,以免遗漏什么重要信息 剪切板位置 剪切板是计算机操作系统提供的一个临时存储区域,用于在不同应用程序之间 ...
- js 获取剪切板内容
1. 粘贴事件 const items = (event.clipboardData || window.clipboardData).itemsconst len = items.lengthlet ...
- js获取剪切板文字图片方法
有时候经常在网上看到网页可以读取系统粘贴板的内容,可以显示文字和图片等内容,就挺好奇的,所以就研究了一下. 基本原理 通过监听input的paste事件,获取到clipboardData内容,然后显示 ...
- html5 js 手机剪切板,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...
新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下 使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipb ...
- 在vim粘贴系统剪切板里的内容
我们要做的是从浏览器里复制一段内容粘贴到Vim里 在浏览器Ctrl + V 进入Vim,进入命令模式输入:reg(显示VIM的寄存器,记录了以前复制的东西,可以记录10多次),显示如下: 例如我们 ...
最新文章
- 如何在Go中编写多行字符串?
- Linux C编程--main函数参数解析
- php用户登录后跳转到主页,phpmyadmin登录后跳到首页的问题
- ASP.NET状态管理
- 干货总结:SPI总线详细要点
- static和extern对函数的作用
- Cacti0.8.8a监控mysql
- 1. WordPress 安装
- VBA一招解决宏病毒
- Excel 闪退及老是提示内存不足情况实测解决方法
- 双十一会场体验 SSR 优化 - 走向更复杂的渲染架构
- MongoDB学习笔记之索引(一)
- 英雄联盟 python 刷等级_自从学了python,我再也不缺英雄联盟的皮肤了
- 什么是DML与DDL
- 基于沉积学教材的自顶向下的概念抽取(以沉积相为例为例)
- PoE供电交换机的四种连接方式
- 5G 频段 频率与Band对应表
- 痞子衡嵌入式:飞思卡尔i.MX RT系列MCU量产神器RT-Flash用户指南
- linux下编译isl,CentOS 6 编译GCC 4.8.1简明流程
- Nginx OpenResty Tengine到底改选哪个?