快捷導(dǎo)航

如何用JS解析剪切板里的excel內(nèi)容

更新時(shí)間：2021年04月30日 10:17:06 投稿：zhanglei

這篇文章主要介紹了如何用JS解析剪切板里的excel內(nèi)容，對(duì)解析excel感興趣的同學(xué)，可以參考下

前言

這次記錄的是昨晚一個(gè)想法：把excel內(nèi)容復(fù)制到剪切板并轉(zhuǎn)成自己想要的json格式，核心是要把excel內(nèi)容轉(zhuǎn)json，這部分主要看excel的格式和json如何業(yè)務(wù)的映射，不展開(kāi)。倒是通過(guò)實(shí)踐，收獲了剪切板的一些知識(shí)點(diǎn)。

注：因?yàn)橹皇菫榱俗约旱男」ぞ邔?shí)現(xiàn)，不考慮兼容，在chrome下實(shí)踐

整個(gè)步驟是：

從一封有內(nèi)容的excel里，選中內(nèi)容，ctrl+c復(fù)制到剪切板（剛好我的內(nèi)容就是整張表，ctrl+A就可以選中內(nèi)容）
粘貼到web頁(yè)面，js監(jiān)聽(tīng)paste事件，從剪切板對(duì)象里獲得復(fù)制的excel內(nèi)容（含格式）
將內(nèi)容解析處理成自己的格式【擴(kuò)展補(bǔ)充】

這里主要可以分為三點(diǎn)：

1. 粘貼事件和剪切板

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

粘貼事件觸發(fā)時(shí)，可以從event里獲取到clipboardData

不過(guò)里面使用時(shí)還用了window.clipboardData，我在chrome和codepen下試驗(yàn)，都沒(méi)獲取到內(nèi)容。

2. 剪切板里的內(nèi)容格式

在上一部分的代碼打印到控制臺(tái)，會(huì)有個(gè)疑惑，就是控制臺(tái)打出來(lái)一個(gè)DataTransfer對(duì)象，但其實(shí)這個(gè)對(duì)象在控制臺(tái)展開(kāi)時(shí)屬性不是沒(méi)有值就是空數(shù)組，很懵逼。

直到我往里面console屬性?xún)?nèi)容，才找到。

在這個(gè)對(duì)象里，getData是它的常用方法，用于獲取數(shù)據(jù)內(nèi)容，它需要接受一個(gè)DOMString的參數(shù)。

一般常用的是粘貼純文本，純文本 getData('text') 即可獲得。

但我要的是excel的格式，一開(kāi)始并不知道excel是啥格式，但是從excel拷貝再粘貼回excel，格式依然保留，所以想著剪切板應(yīng)該還保留原內(nèi)容的格式，所以就嘗試下。

通過(guò)遍歷打印出DataTransfer對(duì)象的types屬性，可以能知曉

document.addEventListener('paste', event => {
      event.clipboardData.types.map(type=>{console.log(type)})
})

types有三個(gè)值：text/plain,text/html,Files

于是用types的‘text/html'，和getData一試，果然拿到了帶格式的內(nèi)容，實(shí)際上是一段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>
...

通過(guò)觀察得知，想要的內(nèi)容就是html代碼里的table，接下來(lái)要轉(zhuǎn)格式就好辦了，搞定解析html字符串，用選擇器的方式獲取單元格內(nèi)容就差不多了。

3. 如何解析html字符串

這里著實(shí)耗費(fèi)了我不少時(shí)間，后面找到了DOMParser,原來(lái)原生就支持解析html字符串>>

通過(guò) (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)容的詳細(xì)內(nèi)容，更多關(guān)于JS解析剪切板里的excel內(nèi)容的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: