首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

如何用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内容的资料请关注其它相关文章！


        
    

        
推荐阅读

        

            
        

    


    

        

            
            

                
                author-avatar
            


            

                Wo-们是平行线            


            

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



        

    


    

    

    
    

    

        
Tags | 热门标签

        

            
        

    


    
    

        

            

            

        

        
RankList | 热门文章

        

            
        

    

    


    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具  | 在线工具

    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved  |   京公网安备 11010802041100号  |  京ICP备19059560号-4 | PHP1.CN 第一PHP社区      版权所有