如何用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物件，但其實這個物件在控制檯展開時屬性不是沒有rGcwk
直到我往裡面console屬性內容，才找到。
在這個物件裡，getData是它的常用方法，用於獲取資料內容，它需要接受一個DOMrGcwkString的引數。
一般常用的是貼上純文字，純文字 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
www.cppcns.com於是用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.qu程式設計客棧erySelectorAll('table tr'));
於是就可以愉快的querySelectorAll了。
以上就是如何用JS解析剪下板裡的excel內容的詳細內容，更多關於JS解析剪下板裡的excel內容的資料請關注我們其它相關文章！