JS 解析剪切板内容

背景

业务需求，把excel内容复制到剪切板并转成自己想要的json格式，核心是要把excel内容转json，这部分主要看excel的格式和json如何业务的映射，借此对复制粘贴事件进行拓展。
整个过程可拆解为三步：

1. 选中内容，ctrl+c复制到剪切板粘贴到web页面
2. js监听paste事件，从剪切板对象里获得复制的excel内容（含格式）
3. 将内容解析处理成自己的格式

实现

1. 粘贴事件和剪切板

可以通过Event 获取剪切板中的内容

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

2.剪切板中的内容格式上述内容

会发现控制台打印出 DataTransfer对象，实际有值，详细展开后发现是空的！！

这里需要是用 DataTransfer对象的属性或者是方法，才能进一步打印出来内容。
如何知晓剪切板中的内容是图片，文本，还是其他等等？？
这是是通过 event.clipboardData.types来判断内容类型，event.clipboardData.types 属性返回一个DOMStringList对象，其中包含了剪贴板中可用的数据类型。常见的类型包括：

"text/plain"：纯文本类型。
"text/html"：HTML格式的文本。
"text/rtf"：富文本格式。
"text/csv"：逗号分隔值（CSV）格式。
"image/png"：PNG图像格式。
"image/jpeg"：JPEG图像格式。
"image/gif"：GIF图像格式。
"application/pdf"：PDF文档格式。
"application/msword"：Microsoft Word文档格式。
"application/vnd.ms-excel"：Microsoft Excel电子表格格式。
"application/vnd.ms-powerpoint"：Microsoft PowerPoint演示文稿格式。
"application/json"：JSON数据格式

3.解析内容

获取对应的文本类型使用 event.clipboardData.getData() 方法，这里以获取Excel中复制的内容为例

将选中的内容复制，粘贴到剪切板，监听粘贴事件拿到的类型有

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

使用text/html 类型进行获取数据

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

通过 DomParser 解析html 进行处理

document.addEventListener('paste', event => {
      const html = event.clipboardData.getData('text/html');
      const $doc = new DOMParser().parseFromString(html, 'text/html');
      // 加载所有的行
      const tableArr = Array.from($doc.querySelectorAll('table tr'));
      
      // 将解析到的数据进行映射到json字段中 这里是想要映射的字段集合
      const fontValue = ['name', 'price', 'Code', 'num']
      const data = []
      for (let i = 0; i < tableArr.length; i++) {
        const trTemp = tableArr[i];
        const obj = {};
        const cells = Array.from(trTemp.querySelectorAll('td'));
        cells.forEach((cell, index) => {
          console.log(cell.textContent, cell.innerHTML)
          const text = cell.textContent;
          obj[fontValue[index]] = text;
          data.push(obj);
        });
      }

      console.log(data, 9999);
    })