如何用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 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内容的资料请关注脚本之家其它相关文章！
相关文章
下面小编就为大家带来一篇js方法数据验证的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
本节代码主要使用了Document对象关于窗口的一些属性，附实现代码及源程序解决，有需求的朋友可以参考下2013-07-07
KnockoutJS 3.X API 第四章之表单value绑定
Knockout是一个以数据模型（data model）为基础的能够帮助你创建富文本，响应显示和编辑用户界面的JavaScript类库。这篇文章主要介绍了KnockoutJS 3.X API 第四章之表单value绑定的相关资料,需要的朋友可以参考下2016-10-10
本篇文章主要介绍了JS正则表达式验证中文字符的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧2017-05-05
这篇文章主要介绍了JS事件绑定的常用方式,结合实例形式总结分析了javascript三种常见的事件绑定原理与操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了微信小程序canvas绘制圆角base64图片的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了详解Webwork中Action 调用的方法的相关资料,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了JavaScript实现下拉菜单的显示和隐藏的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了js中switch case循环实例代码，有需要的朋友可以参考一下2013-12-12
本文主要介绍了详解JavaScript中Arguments对象用途，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
最新评论