實踐筆記：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了。