如何通过JavaScript高效提取剪切板中的Excel数据？
- 内容介绍
- 文章标签
- 相关推荐
本文共计686个文字，预计阅读时间需要3分钟。
目录+前言+1. 粘贴事件和剪切板+2. 剪切板中的内容格式+3. 如何解析HTML字符串+前言+本次记录的是一个晚上的想法：将Excel内容复制到剪切板，并转换成自己想要的JSON格式，核心是要将Excel内容转换。
目录
- 前言
- 1. 粘贴事件和剪切板
- 2. 剪切板里的内容格式
- 3. 如何解析html字符串
前言
这次记录的是昨晚一个想法：把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="www.w3.org/TR/REC-html40"> <head> <meta www.558idc.com/dibai.html欢迎留下您的宝贵建议】
本文共计686个文字，预计阅读时间需要3分钟。
目录+前言+1. 粘贴事件和剪切板+2. 剪切板中的内容格式+3. 如何解析HTML字符串+前言+本次记录的是一个晚上的想法：将Excel内容复制到剪切板，并转换成自己想要的JSON格式，核心是要将Excel内容转换。
目录
- 前言
- 1. 粘贴事件和剪切板
- 2. 剪切板里的内容格式
- 3. 如何解析html字符串
前言
这次记录的是昨晚一个想法：把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="www.w3.org/TR/REC-html40"> <head> <meta www.558idc.com/dibai.html欢迎留下您的宝贵建议】