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
jQuery implementiert die Praxis, die Position und Größe von div durch Ziehen der Maus zu ändern
Um einen Windows Forms ähnlichen Effekt zu erziel...
So konfigurieren Sie den Whitelist-Zugriff in MySQL
Schritte zum Konfigurieren des Whitelist-Zugriffs...
Teilen Sie 20 JavaScript-Einzeilencodes
Inhaltsverzeichnis 1. Holen Sie sich den Wert des...
Natives JavaScript zum Erzielen von Folieneffekten
Wenn wir eine Seite erstellen, insbesondere eine ...
Detaillierte Erklärung des Unterschieds zwischen adaptiver und responsiver Analyse in der Umgangssprache
Basierend auf täglichen Entwicklungserfahrungen u...
Detaillierte Erklärung des Rewrite-Moduls von Nginx
Das Umschreibmodul ist das Modul ngx_http_rewrite...
Detaillierte Erläuterung der benutzerdefinierten Vue-Anweisungen und ihrer Verwendung
Inhaltsverzeichnis 1. Was ist eine Richtlinie? Ei...
Tutorial zum Erstellen eines FTP-Servers in Ubuntu 16.04
Ubuntu 16.04 baut FTP-Server FTP installieren FTP...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 unter Windows
In diesem Artikel finden Sie das grafische Tutori...
Detaillierte Erklärung des Whereis-Beispiels zum Suchen eines bestimmten Programms in Linux
Linux findet ein bestimmtes Programm, wo ist Der ...
Einfaches Anwendungsbeispiel für eine rekursive Vue-Komponente
Vorwort Ich glaube, dass viele Studenten bereits ...
Tutorial zur Installation von MongoDB unter Linux
MongoDB ist plattformübergreifend und kann sowohl...
Tomcat-Domänennamenzugriff mit mehreren Ports und Konfiguration zum Aktivieren der GZIP-Komprimierungsmethode
1. Zusätzlich zum Standardport 8080 versuchen wir...
So aktivieren oder deaktivieren Sie SSH für einen bestimmten Benutzer oder eine bestimmte Benutzergruppe in Linux
Aufgrund Ihrer Unternehmensstandards gestatten Si...
MySQL-Cursorfunktionen und -Verwendung
Inhaltsverzeichnis Definition Die Rolle des Curso...