So verwenden Sie JS zum Parsen des Excel-Inhalts in der Zwischenablage
VorwortDieses Mal habe ich eine Idee festgehalten, die ich letzte Nacht hatte: den Excel-Inhalt in die Zwischenablage kopieren und in das gewünschte JSON-Format konvertieren. Der Kern besteht darin, den Excel-Inhalt in JSON zu konvertieren. Dieser Teil hängt hauptsächlich davon ab, wie das Excel-Format und JSON dem Unternehmen zugeordnet werden, daher werde ich nicht näher darauf eingehen. Durch die Übung habe ich jedoch einiges über die Zwischenablage gelernt. Hinweis: Da es sich nur um meine eigene Gadget-Implementierung handelt, berücksichtige ich die Kompatibilität nicht und übe es unter Chrome Die gesamten Schritte sind:
Hier gibt es drei Hauptpunkte: 1. Ereignisse und Zwischenablage einfügen
document.addEventListener('einfügen', Ereignis => {
//clipboardData-Objekt in der Ereigniskonsole.log(event.clipboardData)
})Wenn das Einfügeereignis ausgelöst wird, können Sie die ClipboardData aus dem Ereignis abrufen. Allerdings wird darin auch window.clipboardData verwendet. Ich habe es in Chrome und Codepen versucht, konnte den Inhalt aber nicht abrufen. 2. Das Inhaltsformat in der ZwischenablageWenn der Code im vorherigen Teil auf der Konsole ausgegeben wird, entsteht ein Rätsel. Auf der Konsole wird ein DataTransfer-Objekt ausgegeben. Tatsächlich haben die Attribute jedoch entweder keinen Wert oder sind leere Arrays, wenn dieses Objekt auf der Konsole erweitert wird, was sehr verwirrend ist. Ich habe es erst gefunden, als ich mir den Inhalt der Konsoleneigenschaften angesehen habe. In diesem Objekt ist getData die allgemeine Methode, die zum Abrufen von Dateninhalten verwendet wird. Sie muss einen DOMString-Parameter akzeptieren. Die häufig verwendete Methode besteht im Einfügen von einfachem Text, der durch den Aufruf von getData('text') abgerufen werden kann. Was ich aber möchte, ist das Excel-Format. Zuerst wusste ich nicht, was Excel-Format ist, aber als ich es aus Excel kopierte und wieder in Excel einfügte, blieb das Format erhalten, also dachte ich, die Zwischenablage sollte das Format des ursprünglichen Inhalts beibehalten, also probierte ich es aus. Durch Durchlaufen und Ausdrucken des Typenattributs des DataTransfer-Objekts können Sie wissen
document.addEventListener('einfügen', Ereignis => {
Ereignis.clipboardData.types.map(Typ=>{console.log(Typ)})
})Typ hat drei Werte: text/plain, text/html, Files Also habe ich den Typ 'text/html' verwendet und getData ausprobiert und tatsächlich habe ich den formatierten Inhalt erhalten, der eigentlich eine Zeichenfolge mit HTML-Code ist, wie folgt <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"> <Kopf> <meta http-equiv=Inhaltstyp content="text/html; charset=utf-8"> <Stil> ... <Tabelle> ... Durch Beobachtung wissen wir, dass der gewünschte Inhalt die Tabelle im HTML-Code ist. Dann ist es einfach, das Format zu konvertieren. Analysieren Sie einfach die HTML-Zeichenfolge und verwenden Sie den Selektor, um den Zelleninhalt abzurufen. 3. So analysieren Sie HTML-ZeichenfolgenDies hat mich wirklich viel Zeit gekostet und später habe ich DOMParser gefunden, das ursprünglich das Parsen von HTML-Zeichenfolgen unterstützt>> Konvertieren Sie einen String in DOM mit (new DOMParser()).parseFromString
const html = event.clipboardData.getData('text/html');
const $doc = neuer DOMParser().parseFromString(html,'text/html');
// Alle Zeilen laden const $trs = Array.from($doc.querySelectorAll('table tr'));Dann können Sie problemlos querySelectorAll verwenden. Oben finden Sie Einzelheiten zur Verwendung von JS zum Parsen des Excel-Inhalts in der Zwischenablage. Weitere Informationen zum Parsen des Excel-Inhalts in der Zwischenablage mit JS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: Detailliertes Tutorial zur Installation von mysql5.7.21 unter Windows
>>: Die aktuellen Einschränkungen von Nginx in einem Artikel verstehen (einfache Implementierung)
Artikel empfehlen
Detaillierte Einführung in die Mysql-Datumsabfrage
Abfrage des aktuellen Datums AKTUELLES DATUM AUSW...
Angular-Leistungsoptimierung: Komponenten von Drittanbietern und Lazy-Loading-Technologie
Inhaltsverzeichnis Überblick Umgebungsvorbereitun...
Installation und Verwendung von Apache-Stresstest-Tools
1. Herunterladen Gehen Sie zur offiziellen Apache...
Details zum Prototypmodus des Javascript-Entwurfsmusters
Inhaltsverzeichnis 1. Prototyp-Modus Beispiel 1 B...
So stellen Sie Node.js mit Docker bereit
Vorwort Node wird als mittlere Schicht im Projekt...
So betreten und verlassen Sie den Docker-Container
1 Starten Sie den Docker-Dienst Zuerst müssen Sie...
Informationen zu VUEs Kompilierungsumfang und Slotumfang-Slotproblemen
Was sind Slots? Die Slot-Direktive ist v-slot, di...
HTML 5 Vorschau
<br />Original: http://www.alistapart.com/ar...
Einführung in die Wissenspunkte MySql-Tabelle, Datenbank, Sharding und Partitionierung
1. Einleitung Wenn die Datenmenge in der Datenban...
So überwachen Sie Oracle-Datenbanken mit Zabbix Agent2
Überblick In Zabbix Version 5.0 und höher wurde e...
Warum gibt es das in JS?
Inhaltsverzeichnis 1. Nachfrage 2. Lösung 3. Die ...
js realisiert 3D-Soundeffekte durch audioContext
In diesem Artikel wird der spezifische Code von j...
So implementieren Sie das automatische Herunterfahren von Linux bei schwacher Batterie
Vorwort Die Stromversorgung in meiner Wohnung ist...
Detailliertes Tutorial zum Ausführen von Tomcat im Debugmodus im IDEA Maven-Projekt
1. Fügen Sie die folgenden Abhängigkeiten in pom....
Tiefgreifendes Verständnis der Verwendung von r2dbc in MySQL
Einführung MySQL sollte eine sehr häufig verwende...