实践笔记：js解析剪切板里的excel内容

时间 2020-02-23

标签实践笔记解析剪切板 excel 内容栏目 JavaScript 繁體版

原文原文链接

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

注：由于只是为了本身的小工具实现，不考虑兼容，在chrome下实践web

整个步骤是：chrome

从一封有内容的excel里，选中内容，ctrl+c复制到剪切板（恰好个人内容就是整张表，ctrl+A就能够选中内容）
粘贴到web页面，js监听paste事件，从剪切板对象里得到复制的excel内容（含格式）
将内容解析处理成本身的格式【扩展补充】

这里主要能够分为三点：json

1. 粘贴事件和剪切板

document.addEventListener('paste', event => {
    // event里的clipboardData对象
   console.log(event.clipboardData)
})

粘贴事件触发时，能够从event里获取到clipboardData数组

参考自这里>>工具

不过里面使用时还用了window.clipboardData，我在chrome和codepen下试验，都没获取到内容。post

2. 剪切板里的内容格式

在上一部分的代码打印到控制台，会有个疑惑，就是控制台打出来一个DataTransfer对象，但其实这个对象在控制台展开时属性不是没有值就是空数组，很懵逼。ui

直到我往里面console属性内容，才找到。excel

在这个对象里，getData是它的经常使用方法，用于获取数据内容，它须要接受一个DOMString的参数。code

通常经常使用的是粘贴纯文本，纯文本 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了。

总结

通过一段小探索，完成了本身的需求，收获了三个关键字知识点： clipboardData, DataTransfer, DOMParser。每一个都值得好好挖掘~