文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

前言

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

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

整个步骤是:

这里主要可以分为三点:

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  xmlns:o="urn:schemas-microsoft-com:office:office"  xmlns:x="urn:schemas-microsoft-com:office:excel"  xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta  http-equiv=Content-Type  content="text/html; charset=utf-8">
<style>
...
<table>
...

通过观察得知,想要的内容就是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内容的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯