Speichern einer HTML Seite

Sempervivum · 10. April 2018

Auch der erste Versuch sollte laufen, Du hast nur den Fehler gemacht, dass Du in readhtmlformdata auf firstInfo zugreifst, während die Daten in formdata stehen. Am besten gleich den passenden Namen verwenden:

HTML

            function savehtmlformdata() {
               // So lautet der Name des Arrays "firstInfo":
               $("#formdata").text("var firstInfo = " + JSON.stringify(firstInfo)) + ";";
               var thehtml = $("html");
               var doc = '<!doctype html><html>' + thehtml.html() + '</html>';
               download(doc, "savedTQ.html", "text/html");
               alert(firstInfo['generalinfo']['sysIntegr']);
            }
            function readhtmlformdata() {
               // Und dann sollte auch der Zugriff auf firstInfo funktionieren:
               alert(firstInfo['generalinfo']['sysIntegr']);
            }

Alles anzeigen

Sempervivum · 10. April 2018

PS: Um Überschneidungen bei "firstInfo" zu vermeiden, sollten wir besser bei formdata bleiben:

HTML

            function savehtmlformdata() {
               // Array "formdata" mit Inhalt von Array "firstInfo" definieren:
               $("#formdata").text("var formdata = " + JSON.stringify(firstInfo)) + ";";
               var thehtml = $("html");
               var doc = '<!doctype html><html>' + thehtml.html() + '</html>';
               download(doc, "savedTQ.html", "text/html");
               alert(firstInfo['generalinfo']['sysIntegr']);
            }
            function readhtmlformdata() {
               // Und jetzt auf formdata zugreifen:
               alert(formdata['generalinfo']['sysIntegr']);
            }

Alles anzeigen

olaf2500 · 10. April 2018

Mit diesem Code kommt bei mir zwar kein Fehler in der Konsole aber beim Speichern im Alert ein "undefined" und beim Laden gar kein alert

Edit: das "undefined" war ein Fehler von mir beim speichern kommt der richtige Wert, nur beim Laden kein alert un dkein Fehler in der Konsole

Sempervivum · 10. April 2018

Ich muss zugeben, dass ich den Code diesmal nicht getestet habe. Hast Du den aus meinem "PS" genommen? Wenn es mit dem nicht funktioniert, werde ich es noch Mal in meine Testseite eintragen.

olaf2500 · 10. April 2018

Zitat von Sempervivum

Ich muss zugeben, dass ich den Code diesmal nicht getestet habe. Hast Du den aus meinem "PS" genommen? Wenn es mit dem nicht funktioniert, werde ich es noch Mal in meine Testseite eintragen.

Ich habs noch einmal getestet, mit dem Code aus deinem PS passiert genau das gleiche wie bei meinem ersten Code, beim Speichern zeigt es den richtigen Wert an beim Laden kommt der Fehler "Uncaught TypeError: Cannot read property 'sysIntegr' of undefined" in der Konsole

Sempervivum · 10. April 2018

OK, ich übernehme es mal in meine Testseite. Wird einen Moment dauern ...

Sempervivum · 10. April 2018

So, ich habe das Ganze jetzt in meine Testseite übernommen. Folgende Probleme hatte ich:

Du greifst zwar auf 'sysIntegr' zu, in deinem Code aus Posting #40 finde ich dieses Feld jedoch nicht, sondern die Values werden direkt unter 'generalinfo" eingetragen.
Du definierst alles als Array, dann funktioniert es mit Namen als Schlüssel nur teilweise. Besser als Objekte definieren.

Dies ist, was ich mir zusammen gereimt habe und was soweit funktioniert. Leider weiß ich jetzt nicht mehr, ob es noch deine Gegebenheiten trifft.

HTML

 <!doctype html>
<html lang="en">

<head>
    <title>Test download</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="js/download.js"></script>
    <script id="formdata"></script>
</head>

<body>
    <button onclick="savehtmlformdata();">Als HTML mit Formulardaten speichern</button>
    <button onclick="readhtmlformdata();">Formulardaten lesen</button>
    <input id="input1" name="input1" class="generalinfo">Input 1
    <input id="input2" ame="input2" class="generalinfo">Input 2
    <input id="input3" name="input3" class="generalinfo">Input 3
    <input id="input" name="input4" class="generalinfo">Input 4
    <script>
        var firstInfo;
        $(".generalinfo").on("input", function() {
            firstInfo = {};
            firstInfo['generalinfo'] = {};
            firstInfo['object'] = [];
            firstInfo['conveyor'] = [];
            firstInfo['rfid'] = [];
            firstInfo['opticalident'] = [];
            firstInfo['interface'] = [];
            var y = document.getElementsByClassName('generalinfo');
            for (var i = 0; i < y.length; i++) {
                firstInfo['generalinfo'][y[i].id] = y[i].value;
            }
        });
        function savehtmlformdata() {
            // Array "formdata" mit Inhalt von Array "firstInfo" definieren:
            $("#formdata").text("var formdata = " + JSON.stringify(firstInfo)) + ";";
            var thehtml = $("html");
            var doc = '<!doctype html><html>' + thehtml.html() + '</html>';
            download(doc, "savedTQ.html", "text/html");
            console.log(firstInfo['generalinfo']);
        }
        function readhtmlformdata() {
            // Und jetzt auf formdata zugreifen:
            console.log(formdata['generalinfo']);
        }
    </script>
</body>

</html>

Alles anzeigen

olaf2500 · 10. April 2018

Dankeschön, klappt super

'sysIntegr' enspricht bei mir dem Wert y[0].id, daher dachte ich das würde klappen. Jetzt funktioniert es wunderbar vielen Dank für deine Mühe

Vermutlich wirst du die kommenden Tage noch einmal von mir hören

Sempervivum · 10. April 2018

Zitat

'sysIntegr' enspricht bei mir dem Wert y[0].id

Ahja, dann verstehe ich auch, wie der Alert bei dir funktionieren konnte. Super, dass es jetzt klappt.

olaf2500 · 11. April 2018

Ich habe noch eine Frage, ich habe es jetzt geschafft das zu speichernde HTML-File in einen ZIP-Ordner zu packen (mit jszip.js von https://github.com/Stuk/jszip/tree/master/dist) und in einem weiteren Unterordner eine generierte Textdatei:

JavaScript

var thehtml = $("html");
var doc = '<!doctype html><html>' + thehtml.html() + '</html>';
//ZIP BEREICH
var zip = new JSZip();
zip.file("test/saved.html", doc +"\n");
zip.file("test/files/hello.txt", "");
zip.generateAsync({type:"blob"}).then(function (blob) {
download(blob, "savedTest.zip", "application/zip");});

Ich hätte gerne statt dieser Textdatei alle mit dem HTML zusammenhängende Dateien (Bilder, CSS, Scripte etc.) in diesem Ordner, finde aber keine Möglichkeit wie ich die einlesen und in diesen Ordner packen kann

Sempervivum · 11. April 2018

Wäre alles kein Problem, wenn Du einen Webserver lokal auf deinem Computer installieren könntest.

Bei dem Skript, das die docx-Dateien erzeugt, wurde jedoch eine Möglichkeit angegeben, wie man die Bilder base64-kodiert inline einbinden kann. Ich werde es mir dort einmal ansehen, ob es eine Lösung liefert ...

Sempervivum · 11. April 2018

Zitat

wie man die Bilder base64-kodiert inline einbinden kann.

Ergebnis: Funktioniert einwandfrei, aber nur, wenn das Skript auf einem Webserver läuft. Wenn nicht, gibt es, wie auch beim iFrame, Cross-Domain-Probleme ("tainted canvas")

Wenn Du definitiv keinen Webserver installieren kannst, sehe ich nur noch die Möglichkeit, Javascript und CSS inline zu definieren, die Bilder manuell nach base64 zu konvertieren (dafür gibt es Online-Konverter) und ebenfalls inline zu definieren. Ein Vorteil wäre dabei, dass alles in der HTML-Datei vorhanden wäre und der Benutzer kein ZIP-File auspacken muss.

Was ist denn eigentlich der Grund dafür, dass das lokal und ohne Webserver laufen muss?

olaf2500 · 11. April 2018

Okay schade, dann wird es wohl nicht anders gehen. Der Grund ist, dass spätere Benutzer (es geht um einen Fragebogen) in der Regel keinen Webserver installiert haben, für mich selbst wäre das natürlich kein Problem aber ich kann das leider nicht von den Benutzern verlangen.

Trotzdem noch einmal vielen vielen Dank für deine Hilfe du hast mir so enorm weitergeholfen

Speichern einer HTML Seite

Jetzt mitmachen!

Teilen