Romero: Kopieren von Daten eines Arrays

Hallöchen an Euch,

ich habe ein Array und würde daraus gern die Daten z.B. für eine Excel-Tabelle kopieren lassen. Das Array ist wie folgt aufgebaut:

Array[0] = ["VW", "Audi", "BMW", ...]; //==> Array[0][0] = "VW"
Array[1] = ["KFZ-Nr: 002345", "KFZ-Nr: 995003", "KFZ-Nr: 102253", ...] //==> Array[1][0] = "KFZ-Nr: 002345"
Array[2] = ["20.000", "30.000", "40.000", ...]; //==> Array[2][0] = "20.000"
Array[3] = ["€", "€", "€", ...]; //==> Array[3][0] = "€"

Nun möchte ich diese Daten ins Excel kopieren und z.B. das Array[0] in Spalte A, Array[1] in Spalte B, usw. einfließen lassen. Weil über diesen Befehl "document.execCommand('Copy')" ist das sicherlich nicht zu bewerkstelligen.

Kennt da jemand die Lösung? Oder wo ich da nachlesen könnte, wie man ein mehrdimensonales Array kopieren, aufbereiten und kopieren kann, um es z.B. für Excel anwendbar zu machen?

LG Romero

  1. Hallo Romero,

    ich habe ein Array und würde daraus gern die Daten z.B. für eine Excel-Tabelle kopieren lassen.

    Mir fallen dafür zwei Varianten ein:

    1. Erzeugen einer HTML-Tabelle mit JavaScript:

    |VW|Audi|BMW|...| |KFZ-Nr: 002345|KFZ-Nr: 995003|KFZ-Nr: 102253|...| |20.000|30.000|40.000|...| |€|€|€|...|

    Diese Tabelle könntest du dann per Copy and Paste in Excel einnfügen (Zumindest in LibreOffice Calc geht das).

    2. Generieren einer CSV-Datei

    VW;Audi;BMW;...
    KFZ-Nr: 002345;KFZ-Nr: 995003;KFZ-Nr: 102253;...
    20.000;30.000;40.000;...
    €;€;€;...
    

    Alternativ könntest du eine CSV-Datei erzeugen und diese dann mit Excel öffnen.


    Im Übrigen würde es sich anbieten, das „KFZ-Nr:“ vor der jeweiligen Zahlenfolge wegzulassen. Falls das konstant ist, bräuchtest du es gar nicht speichern – damit sparst du Speicherplatz und Aufwand (falls du mal nur die Nummer ausgeben willst).

    Gruß
    Julius

    1. Hy Julius,

      1. Erzeugen einer HTML-Tabelle mit JavaScript:

      ... Diese Tabelle könntest du dann per Copy and Paste in Excel einnfügen (Zumindest in LibreOffice Calc geht das).

      Das wäre ein Ansatz, den ich mir schonmal durchdacht hatte. Aber wie kriege ich diese "Daten" der Tabelle, mittels "Kopier-Button" in die Zwischenablage kopiert? Das ist der Punkt, den ich nutzen will, Daten mittels einem Button zu kopieren, was das gesamte Array (entsprechend aufgebaut) kopiert und mir dann irgendwo, wo ich es brauch, einfügen soll.

      2. Generieren einer CSV-Datei

      ... Alternativ könntest du eine CSV-Datei erzeugen und diese dann mit Excel öffnen.

      Diesen Ansatz wäre auch denkbar, aber für meine Zwecke doch umständlich, da ich die Daten, so wie in Excel reinkopiert, auch für andere Programme gleich mitnutzen will (z.B. SAP), welche eine Art tabellarischen Aufbau haben.

      Im Übrigen würde es sich anbieten, das „KFZ-Nr:“ vor der jeweiligen Zahlenfolge wegzulassen. Falls das konstant ist, bräuchtest du es gar nicht speichern – damit sparst du Speicherplatz und Aufwand (falls du mal nur die Nummer ausgeben willst).

      Das mit der KFZ-Nr.: waren nur Beispiele. Du hast recht, fürs Auslesen könnte ich das auch weglassen und später dann wieder hinzufügen. Wie du sagtest, zwecks Speicherplatz, etc.

      LG Romero

  2. document.execCommand('copy') funktioniert angeblich nur wenn das HTML-Dokument im Design-Mode ist, aber damit habe ich es beim Experimentieren auch nicht zum Laufen gebracht.

    Ich hätte aber einen Lösungsvorschlag, die vielleicht etwas gefummelt aussieht, dafür aber mit relativ wenig Benutzerinteraktion funktioniert.

    Schritt 1: Du formatierst deine Daten als einen langen String. Den baust Du aus Zeilen auf, wobei die i-te Zeile die i-ten Werte deiner Spalten enthält. Innerhalb einer Zeile separierst Du die Werte durch einen Tabulator, also &#9;. Die Zeilen separierst Du durch ein Linefeed, also &#10;. Diesen String setzt Du in ein <pre> Element hinein. Es muss pre sein, weil sonst die Tabs zu Spaces werden. Dieses Formatieren kannst Du serverseitig machen, bevor Du die Seite sendest, oder per JavaScript im Browser.

    Schritt 2: Du selektierst den Inhalt dieses Pre-Elementes per JavaScript. Dazu kannst Du folgende Funktion verwenden:

    function SelectText(element) {
        var selection = window.getSelection(),
            range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
    

    Diese Funktion rufst Du mit dem pre-Element als Parameter auf: SelectText(document.getElementById("myPre")); oder ähnlich. Die window.getSelection Methode funktioniert ab IE 9 auch im Internet Explorer, vorher musste man da eine Feature Detection machen. Aber das sollte heutzutage nicht nötig sein. Laut caniuse wird das Selection-API von allen gängigen Browsern außer Opera Mini unterstützt.

    Ergebnis ist, dass deine Daten in einem pre Element stehen und selektiert sind. Der Anwender muss dann "nur noch" mit der rechten Maustaste draufklicken, "Kopieren" sagen, im Excel auf eine Zelle klicken und mit Einfügen -> Inhalte einfügen -> Text holen. Es wird dann dank der Tabs als Trennzeichen spaltengerecht aufbereitet.

    Alternativ kannst Du das Ganze auch serverseitig als echte CSV-Datei aufbereiten und mit Content-Type Header "text/csv" ausliefern, so dass der Browser Dir einen Download anbietet. Diese CSV Datei kannst Du dann mit Excel öffnen.

    Rolf

    1. Hy Rolf,

      leider konnte ich erst jetzt deine Ausführungen testen. String ist zusammen gebaut. Sieht in etwa so aus:

      var KopierListe = "";
      for( var i = 0; i < Liste[0].length; i++ )
      {
      	KopierListe = Liste[0][i] + "&#9;" + Liste[1][i] + "&#9;" + Liste[2][i] + "&#9;" + Liste[2][i] + "&#10;";
      };
      var test = '<pre id="tester">' + KopierListe + '</pre>';
      

      Und ich vermute mal, du meinst sicherlich, dass ich das <pre>-Element in eine separate Variable speichern soll um an die ID zu kommen, oder?

      Zum Test:

      Leider musste ich mit erschrecken feststellen, dass ich leider nur mit einem IE8 arbeite (die Firma ist noch nicht so auf dem neusten Stand :/). D.h. also, ich kann, laut deinen Aussagen, window.getSelection (und all die weiteren Ausführungen) nicht nutzen, da mir eine Fehlermeldung anzeigt wird ("Das Objekt unterstützt diese Eigenschaft oder Methode nicht."). Und ich muss also auf diese Kopier-Funktion mittels Button verzichten?

      Oder gibt es eine Möglichkeit, bei einem IE8 und einer gescripteten HTA-Datei (welche ich verwende, und es hierbei von Bedeutung ist), doch Daten in irgendeiner Weise zu kopieren?

      Ich hoffe, du kannst mir hierbei nocheinmal weiterhelfen.

      LG Romero

      1. 1.)

        D.h. also, ich kann, laut deinen Aussagen, window.getSelection (und all die weiteren Ausführungen) nicht nutzen, da mir eine Fehlermeldung anzeigt wird ("Das Objekt unterstützt diese Eigenschaft oder Methode nicht."). Und ich muss also auf diese Kopier-Funktion mittels Button verzichten?

        Oder gibt es eine Möglichkeit, bei einem IE8 und einer gescripteten HTA-Datei (welche ich verwende, und es hierbei von Bedeutung ist), doch Daten in irgendeiner Weise zu kopieren?

        http://stackoverflow.com/questions/5421892/getselection-not-working-in-ie

        führt dann zu etwas wie:

        function getSelectedText() {
          if (! document.selection ) {
            var range = document.selection.createRange();
            return range.htmlText;
          } else  {
            return window.getSelection().toString();
          }
        }
        

        Das konnte ich mangels eines Schrotthaufens nicht probieren.

        2.)

        Leider musste ich mit erschrecken feststellen, dass ich leider nur mit einem IE8 arbeite (die Firma ist noch nicht so auf dem neusten Stand :/).

        "noch nicht so auf dem neusten Stand" ist eine unangemessene Beschönigung eines aus Sicht der Sicherheit nicht haltbaren Zustands. Dein Chef gefährdet durch Unterlassung notwendiger Ersatzinvestitionen den Bestand der Firma. (Punkt)

        Gehalt zahlt er aber noch? Oder?

        3.) hta

        hat keinerlei Zukunft. Hier wird der Schrott teuer vercromt bevor man ihn wegschmeisst. Mal Deinem ein Chef ein Schild und schreib "2017" drauf. Falls er fragt "Warum und was soll das?" antworte: "Windows XP, IE8, hta - alles längst abgekündigte Software. Das Schild dient dazu, in diesem Museum nicht den Bezug zur Zeit draußen zu verlieren."

        1. 1.) führt dann zu etwas wie:

          function getSelectedText() {
            if (! document.selection ) {
              var range = document.selection.createRange();
              return range.htmlText;
            } else  {
              return window.getSelection().toString();
            }
          }
          

          Das konnte ich mangels eines Schrotthaufens nicht probieren.

          Da hab ich nun rausgefunden, dass ich document.selection.createRange().text benutzen kann oder muss. Hierbei klappt es, wenn ich einen angezeigten Text in meiner "HTA-Datei" selektiert habe. Nun aber die Frage, wie ich den vorher beschriebenen Teil (bzw. dem von Rolf) meines Arrays (oder den Inhalt des <pre>'s-Element's) a) selektieren kann und b) wie ich den kopiert bekomme?

          var selection = document.selection.createRange().text; //==> anstatt window.getSelection()
          var range = document.createRange();
          range.selectNodeContents(element);
          selection.removeAllRanges();
          selection.addRange(range);
          

          2.)

          "noch nicht so auf dem neusten Stand" ist eine unangemessene Beschönigung eines aus Sicht der Sicherheit nicht haltbaren Zustands. Dein Chef gefährdet durch Unterlassung notwendiger Ersatzinvestitionen den Bestand der Firma. (Punkt)

          Gehalt zahlt er aber noch? Oder?

          Ja zahlt er. Frag mich jetzt aber nich, wieviel :/ schnief

          3.) hta

          hat keinerlei Zukunft. Hier wird der Schrott teuer vercromt bevor man ihn wegschmeisst.

          Da ich aber diese HTA-Datei als eine Art Anwendung benutze, ist dieser Schrott grad das, wo ich mittels Javascript diverse Daten, Tabellen, Programme öffnen, vergleichen, ausgeben kann.

          LG Romero

          1. Oha. Mit IE8 und HTA hab ich nicht gerechnet. Den IE-Asbach-Teil hatte ich extra entfernt, als ich meine SelectText Funktion zusammenstellte (war natürlich nicht meine eigene Weisheit).

            Das Problem, automatisiert Text ins Clipboard zu bringen, kannst Du nach meiner bisherigen Erkenntnis nicht lösen. Kann denn dein User in einem laufenden HTA Projekt nicht selbst kopieren? Wenn Du ihm den Text vorselektierst, sollte das doch nicht so dramatisch sein.

            Andererseits - HTA ist doch eigentlich mit höheren Rechten unterwegs als eine normale HTML Seite. Kannst Du da nicht im %TEMP% Ordner eine CSV Datei erstellen und dann Excel mit dieser Datei als Parameter starten?

            Rolf

            PS: <scherz>Warum benutzen Japaner keinen Internet Explorer? IE heißt Nein!, und Japaner sagen so was nicht.</scherz>

            1. Hy Rolf,

              leider kann ich z.Z. "nur" mit einem IE8 arbeiten. Und wer weiß, wann ich (wir) einen IE9 oder höher bekommen. Bis dato MUSS ich mich mit der "Steinzeit" begnügen.

              Um es mal mit anderen Worten zu Umschreiben. Ich benutze einen IE8 und eine HTA als Script-Datei. In dieser Datei, lese und verarbeite ich Daten, welche ich dem Nutzer dann (über eine eingebundene Tabelle) darstelle. Nun soll über einen "Kopier-Button", die in der Tabelle angezeigten Daten kopiert werden (könnten vorher auch selektiert/markiert und nach dem "drücken" wieder ent-selektiert/-markiert werden), welche ich dann u.a. für Excel oder auch SAP oder wohin auch immer transportieren und einfügen möchte.

              Die Markierung der Daten soll ebenfalls über den Button mitgesteuert werden.

              Bisher weiß ich, dass ich mit var selection = document.selection.createRange().text; eine markierte Auswahl mit alert() anzeigen lassen kann. Aber wie kann ich sowas (als Beispiel) kopieren (in die Zwischenablage)?

              LG Romero

              1. Hy Rolf, und allen anderen,

                ich habe eine lösung gefunden, die es mir ermöglicht, Daten auszuwählen und zu kopieren:

                var KopierListe = "";
                for( var i = 0; i < Liste[0].length; i++ )
                {
                	KopierListe = KopierListe + Liste[0][i] + "&#9;" + Liste[1][i] + "&#9;" + Liste[3][i] + "&#9;" + Liste[2][i] + "&#10;";
                };
                
                function Liste_Kopieren(test_id)
                {
                	return function()
                	{
                		document.getElementById("Ausgabe").innerHTML = '<pre id="tester">' + KopierListe + '</pre>';
                		
                		//==> Text markieren
                		if ( document.selection )
                		{
                			var range = document.body.createTextRange();
                			range.moveToElementText(document.getElementById(test_id));
                			range.select();
                		}
                		var selection = document.selection.createRange().text;
                		
                		//==> markierten Text kopieren
                		InZwischenablageKopieren(selection)
                		function InZwischenablageKopieren(s)
                		{
                			if( window.clipboardData && clipboardData.setData ) { clipboardData.setData("text", s); }
                		};
                		
                		document.getElementById("Ausgabe").innerHTML = '<br>';
                	};
                };
                
                document.getElementById("Liste_kopieren").disabled = false;
                document.getElementById("Liste_kopieren").onclick = Liste_Kopieren("Ausgabe");
                

                Soweit funktioniert das mit dem Kopieren wunderbar. Doch leider ist mir irgendwie der Aufbau zu umständlich. Siehe das "Krücke" mit dem <pre>-Element, welches ich erst in meiner HTA einbinde, diese focusiere und markiere, dann kopiere und sie am Ende wiederrum entferne. Die Idee mit dem <pre>-Element ist ansich sehr sehr vorteilhaft, nur das mit dem Einbinden müsste man anders lösen. Hat jemand dazu eine Idee?

                Und/Oder wäre es möglich, die ausgelesenen Daten, welche ich mittels einer integrierten Tabelle, anzeigen lasse, zu markieren und die Selektion so aufzuarbeiten wie in dem <pre>-Element?

                LG Romero

                1. Ok, ich habe vor Jahren schon aufgehört, beim Web mit "MS only" Komponenten zu arbeiten und hatte clipboardData nicht auf dem Schirm.

                  Aber HTA ist eh ein Microsoft-Gedöns, d.h. du kannst davon ausgehen, dass auch clipboardData vorhanden ist. Das wird erst mit Microsoft Edge auf "deprecated" gesetzt. Dein Weg für "Nicht IE" dürfte aber ohnehin steinig werden.

                  Für "pure IE" kannst Du deine clipboardData Lösung vermutlich drastisch kürzen. Ich würde versuchen, die erzeugte Kopierliste gar nicht erst in ein PRE-Element zu schreiben, sondern direkt mit setData("text", KopierListe) ins Clipboard zu stellen. Fertig. Kein Basteln am DOM, kein Hantieren mit Selection Ranges.

                  Rolf

                  1. Hy Rolf,

                    Danke für deine Ansätze. Ich werde es gleich mal machen. Leider hab ich nur IE8 und kann dazu HTA nutzen. Da es ein Offline-Tool ist, was "meine" Nutzer nutzen, werde ich auch da weiterhin in dieser Richtung scrippten.

                    Dieses clipboardData hab ich durch Zufall gefunden, mir durchgelesen und beim testen für gut empfunden. Da werd ich mal meine "KopierListe" zu (d)einem großen String zusammenbasteln.

                    Danke nochmal Rolf, hast mir sehr weitergeholfen. :)

                    LG Romero

        2. hat keinerlei Zukunft. Hier wird der Schrott teuer vercromt bevor man ihn wegschmeisst. Mal Deinem ein Chef ein Schild und schreib "2017" drauf. Falls er fragt "Warum und was soll das?" antworte: "Windows XP, IE8, hta - alles längst abgekündigte Software. Das Schild dient dazu, in diesem Museum nicht den Bezug zur Zeit draußen zu verlieren."

          Ist denn unter WIN7 oder sogar WIN10 sowas wie HTA überhaupt noch zulässig? Wenn nicht, was kann ich stattdessen verwenden? Um mein HTA-Projekt weiterhin für die Benutzer nutzbar zu machen?

          LG Romero

          1. Das Problem ist nicht Windows 7 oder 10, sondern der Internet Explorer. HTA läuft bis IE9 uneingeschränkt, ab IE10 sollen ein paar Kleinigkeiten nicht mehr funktionieren (sagt die engl. Wikipedia mit dem Hinweis 'citation needed'...).

            Hier steht, dass HTA eigentlich schon im IE10 nicht mehr läuft, bzw. es wird vermutet dass HTA auf IE10 nur im IE9 Emulationsmodus läuft, und unter EDGE dürfte es gar nicht mehr gehen.

            Du bist also in einer Sackgasse und solltest Dich nach anderen Entwicklungsumgebungen umschauen. Das tut erstmal weh, aber sofern Du nicht gerade 5 Jahre vor der Rente stehst, dürfte es sich lohnen.

            Rolf

  3. Moin,

    Kennt da jemand die Lösung? Oder wo ich da nachlesen könnte, wie man ein mehrdimensonales Array kopieren, aufbereiten und kopieren kann, um es z.B. für Excel anwendbar zu machen?

    Auch ein Excel kennt Dateiformate die fürn Import gedacht sind, z.B. CSV. Mit Modern JavaScript kannst Du CSV und auch andere Dateien (Blob) erzeugen. FileSaver.js erzeugt den Speichern unter ... Dialog der auch das direkte Öffnen mit Excel anbietet.

    MfG

    1. Hallo pl,

      Auch ein Excel kennt Dateiformate die fürn Import gedacht sind, z.B. CSV. Mit Modern JavaScript kannst Du CSV und auch andere Dateien (Blob) erzeugen. FileSaver.js erzeugt den Speichern unter ... Dialog der auch das direkte Öffnen mit Excel anbietet.

      Das sieht interessant aus, allerdings müsste man dann wohl vom IE8 weg (funktioniert ab IE10), aber das ist ja wirklich kein Nachteil :-)

      Gruß
      Julius

      1. Hai;

        Das sieht interessant aus, allerdings müsste man dann wohl vom IE8 weg (funktioniert ab IE10), aber das ist ja wirklich kein Nachteil :-)

        Ich sags mal so knallhart: Es macht überhaupt keinen Sinn auf ewig-gestrige Browser Rücksicht zu nehmen. Ein Benutzer hat genau 2 Möglichkeiten wenn eine Moderne Anwendung mit seinem IE nicht geht:

        1. er stellt sich in die Ecke und flennt,
        2. er installiert sich einen Modernen Browser.

        #If ! 2 goto 1

        MfG