JS を使用してクリップボード内の Excel コンテンツを解析する方法

序文

今回は昨晩思いついたアイデアを記録しました。Excel の内容をクリップボードにコピーし、必要な JSON 形式に変換するというものです。核となるのは、Excel の内容を JSON に変換することです。この部分は主に Excel 形式と JSON がビジネスにどのようにマッピングされるかによって決まるため、ここでは詳しく説明しません。しかし、実践を通して、クリップボードに関するいくつかの知識を得ることができました。

注: これは自分のガジェット実装用なので互換性は考慮せず、Chromeで実践しています

全体の手順は次のとおりです。

コンテンツを含む Excel ファイルから、コンテンツを選択し、Ctrl + C を押してクリップボードにコピーします (コンテンツはテーブル全体であるため、Ctrl + A でコンテンツを選択できます)
ウェブページに貼り付けると、js は貼り付けイベントをリッスンし、クリップボードオブジェクトからコピーされた Excel コンテンツ (形式を含む) を取得します。
コンテンツを独自の形式に解析する [拡張補足]

ここでの主なポイントは 3 つあります。

1. イベントとクリップボードを貼り付ける

document.addEventListener('貼り付け', イベント => {
    // イベント内のclipboardDataオブジェクト console.log(event.clipboardData)
})

貼り付けイベントがトリガーされると、イベントからclipboardDataを取得できます。

ただし、window.clipboardData も使用されています。Chrome と codepen で試してみましたが、コンテンツを取得できませんでした。

2. クリップボード内のコンテンツ形式

前の部分のコードがコンソールに出力されると、困惑するでしょう。コンソールには DataTransfer オブジェクトが出力されますが、実際には、このオブジェクトがコンソールで展開されると、属性に値がないか、空の配列になっているため、非常に混乱します。

コンソールのプロパティコンテンツを調べて初めて、それを見つけました。

このオブジェクトでは、getData はデータコンテンツを取得するために使用される共通メソッドです。DOMString パラメータを受け入れる必要があります。

よく使われる方法は、getData('text') を呼び出して取得できるプレーンテキストを貼り付けることです。

しかし、私が欲しいのはExcel形式です。最初はExcel形式が何なのか分かりませんでしたが、ExcelからコピーしてExcelに貼り付けると、形式が保持されたままだったので、クリップボードには元のコンテンツの形式が保持されているはずだと思い、試してみました。

DataTransferオブジェクトのtypes属性を走査して出力することで、

document.addEventListener('貼り付け', イベント => {
      イベント.クリップボードデータ.タイプ.マップ(タイプ=>{console.log(タイプ)})
})

タイプには3つの値があります: text/plain、text/html、Files

そこで、タイプ「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">
<ヘッド>
<meta http-equiv=コンテンツタイプコンテンツ="text/html; charset=utf-8">
<スタイル>
...
<テーブル>
...

観察すると、必要なコンテンツは HTML コード内のテーブルであることがわかります。その後、形式を変換するのは簡単です。HTML 文字列を解析し、セレクターを使用してセルコンテンツを取得するだけです。

3. HTML文字列を解析する方法

これには本当に時間がかかりましたが、その後、HTML 文字列の解析をもともとサポートしている DOMParser を見つけました>>

(new DOMParser()).parseFromString を使用して文字列を DOM に変換します。

定数html = event.clipboardData.getData('text/html');
定数 $doc = 新しい DOMParser().parseFromString(html, 'text/html');
// すべての行を読み込みます const $trs = Array.from($doc.querySelectorAll('table tr'));

その後、問題なく querySelectorAll を実行できます。

上記は、JS を使用してクリップボード内の Excel コンテンツを解析する方法の詳細です。クリップボード内の Excel コンテンツを JS で解析する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: