如何用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對象,但其實這個對象在控制臺展開時屬性不是沒有值就是空數組,很懵逼。
直到我往裡面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="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瞭。
以上就是如何用JS解析剪切板裡的excel內容的詳細內容,更多關於JS解析剪切板裡的excel內容的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- JS實現將數據導出到Excel的方法詳解
- JS如何使用剪貼板操作Clipboard API
- javascript 實現純前端將數據導出excel兩種方式
- JavaScript 拖拉時間之drag案例詳解
- Java KindEditor粘貼圖片自動上傳到服務器功能實現