如何用JS解析剪切板里的excel內(nèi)容
這次記錄的是昨晚一個想法：把excel內(nèi)容復制到剪切板并轉(zhuǎn)成自己想要的json格式，核心是要把excel內(nèi)容轉(zhuǎn)json，這部分主要看excel的格式和json如何業(yè)務的映射，不展開。倒是通過實踐，收獲了剪切板的一些知識點。
注：因為只是為了自己的小工具實現(xiàn)，不考慮兼容，在chrome下實踐
整個步驟是：
從一封有內(nèi)容的excel里，選中內(nèi)容，ctrl+c復制到剪切板（剛好我的內(nèi)容就是整張表，ctrl+A就可以選中內(nèi)容） 粘貼到web頁面，js監(jiān)聽paste事件，從剪切板對象里獲得復制的excel內(nèi)容（含格式） 將內(nèi)容解析處理成自己的格式【擴展補充】這里主要可以分為三點：
1. 粘貼事件和剪切板document.addEventListener(’paste’, event => { // event里的clipboardData對象 console.log(event.clipboardData)})
粘貼事件觸發(fā)時，可以從event里獲取到clipboardData
不過里面使用時還用了window.clipboardData，我在chrome和codepen下試驗，都沒獲取到內(nèi)容。
2. 剪切板里的內(nèi)容格式在上一部分的代碼打印到控制臺，會有個疑惑，就是控制臺打出來一個DataTransfer對象，但其實這個對象在控制臺展開時屬性不是沒有值就是空數(shù)組，很懵逼。
直到我往里面console屬性內(nèi)容，才找到。
在這個對象里，getData是它的常用方法，用于獲取數(shù)據(jù)內(nèi)容，它需要接受一個DOMString的參數(shù)。
一般常用的是粘貼純文本，純文本 getData(’text’) 即可獲得。
但我要的是excel的格式，一開始并不知道excel是啥格式，但是從excel拷貝再粘貼回excel，格式依然保留，所以想著剪切板應該還保留原內(nèi)容的格式，所以就嘗試下。
通過遍歷打印出DataTransfer對象的types屬性，可以能知曉
document.addEventListener(’paste’, event => { event.clipboardData.types.map(type=>{console.log(type)})})
types有三個值：text/plain,text/html,Files
于是用types的‘text/html’，和getData一試，果然拿到了帶格式的內(nèi)容，實際上是一段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>...
通過觀察得知，想要的內(nèi)容就是html代碼里的table，接下來要轉(zhuǎn)格式就好辦了，搞定解析html字符串，用選擇器的方式獲取單元格內(nèi)容就差不多了。
3. 如何解析html字符串這里著實耗費了我不少時間，后面找到了DOMParser,原來原生就支持解析html字符串>>
通過 (new DOMParser()).parseFromString，將字符串轉(zhuǎn)為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了。
以上就是如何用JS解析剪切板里的excel內(nèi)容的詳細內(nèi)容，更多關于JS解析剪切板里的excel內(nèi)容的資料請關注好吧啦網(wǎng)其它相關文章！
相關文章：
網(wǎng)公網(wǎng)安備