JavaScript-generierte Webseite abspeichern?

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Bin schwer Hilfebedürftig…

Ich hab (für unser Labor) eine HTML-Seite geschrieben, die im wesentlichen aus einem Formular und ein paar JavaScripten besteht. Da trägt man Daten wie Probennummer, Kunde, Probenbeschreibung, Untersuchungsumfang ein, und auf Knopfdruck öffnet ein Script dann eine neue Seite im Browser und puzzelt dort aus verschiedenen Text-Bausteinen je nach Kunde, Untersuchungsumfang etc. ein Rohdatenblatt zusammen, mit dem (ausgedruckt natürlich) meine Laboranten dann ins Labor gehen und genau wissen, was sie mit der Probe zu tun haben.
Bis hier hin kein Problem, tut genau das, was ich will - in allen Browsern (na gut, außer - Überraschung! - im Internet Explorer. Egal, den benutzt hier eh niemand).

Jetzt will ich diese vom Script erzeugte Seite lokal abspeichern - zur Dokumentation, vor allem aber für eine mögliche Weiterverarbeitung - da dort ja schon die meisten Daten drin sind, würde es sich anbieten, dort noch die Untersuchungsergebnisse einzutragen und mit einem weiteren Script daraus dann den Prüfbericht zu erzeugen.

Und hier fangen die Probleme an:

  • Der alte Opera (12.17) öffnet beim Versuch die Seite zu speichern zwar eine Dialogbox und bietet mir auch gleich den richtigen Namen (den Titel der generierten Seite) an, aber die abgespeicherte Datei enthält dann nicht die erzeugte Seite, sondern die „Mutter“-Seite mit dem Formular und den Scripten.
  • Chrome und der neue Opera haben in der generierten Seite „Speichern unter“ inaktiv gesetzt und ignorieren STRG + S vollständig.
  • In Firefox funktioniert es, der speichert mir tatsächlich die erzeugte Seite mit allen Daten ab. Aber - und hier setzt’s dann bei mir völlig aus - nur auf meinem Firefox. Die gleiche Firefox-Version auf einem anderen Rechner (mit dem gleichen Betriebssystem) speichert wieder nur den Code der Mutter-Seite.

Was die Sache vollends unlogisch macht: Fast alle Browser besitzen ja eine Analysefunktion (Element untersuchen oder Prüfen im Kontextmenü) - und dabei zeigen mir alle Browser den korrekten Code der erzeugten Seite an - nur abspeichern wollen sie ihn nicht…

Also: kennt irgendjemand eine Methode (PlugIn, JavaScript-Code, Einstellung des Browsers), mit der ich irgendeinen Browser dazu bewegen kann, die erzeugte Seite als solche abzuspeichern?

Der Vollständigkeit halber:

  1. Die generierte Seite ist formal fehlerfrei, ich hab mehrere Varianten durch den W3C-Validator gejagt.
  2. Ich weiss, das JavaScript nicht abspeichern kann. Es geht hier um das Abspeichern im Browser.
  3. Die Daten werden auf mehreren Rechnern erzeugt und ggf. weiterverarbeitet. HTML5 Storage/localStorage bringt mich nicht weiter.
  4. Es geht um lokale HMTL-Dateien. Antworten, die Begriffe wie Server, pHp, Phyton, SQL etc. enthalten, bringen mich auch nicht weiter.

Ich hoffe, irgendjemand hier kann mich in die richtige Richtung schieben…

Heißen Dank! mabuse

#2

Hat sich erledigt, hab’s herausgefunden.

Die Ursache ist - wie immer - eigentlich ganz einfach und - wie immer - strunzdoof:

Wenn man im Firefox eine Seite abspeichert, lässt der mehrere Möglichkeiten zu, unter anderen „Webseite, komplett“ und „Webseite, nur HTML“.

Mit „Webseite, komplett“ wird die generierte Seite abgespeichert, mit „Webseite, nur HTML“ dagegen die Mutterseite mit dem Erzeuger-Script.

Wieso? … ich will’s gar nicht wissen…

Das nur für den Fall, das jemand mal ein ähnliches Problem hat.

Schönen Tag euch allen…
mabuse

#3

Anbei gleich ein Rat:

Wenn es vorab schon um die mögliche Weiterverarbeitung von Informationen eines durch eine Front-End-Technologie erzeugten HTML-Seite geht zu einem späteren Zeitpunkt geht, Rate ich dazu dringend ein Format zu benutzen das nur Daten in einer strukturierten Form festhält. Eins dieser Formate ( die du dann auch leicht bspw. via Javascript wieder auslesen kannst ) wäre das JSON-Format.

JSON steht für JavaScript Object Notation und sieht beispielhaft so aus:

{"name":"Max Mustermann", "age": 16, "job": "Praktikant"}

Um das ganze durch den Browser bereit zu stellen, könntest du das ganze so angehen:

https://jsfiddle.net/tr0y/9n3nuzz6/

Hier wird jQuery verwendet um das Form zu behandeln und ein a-Tag virtuell zu erzeugen und zu klicken. Mit diesem Trick nutzt du das „download“-Attribut eines A-Tags um einen Download einer .json-Datei, deren Inhalt durch die data-Url bereitgestellt wird, einzuleiten.

Diese Datei im JSON-Format könntest du später z.b. auf einem Server via PHP öffnen und verarbeiten ( archivieren ? ). Das könnte aber auch direkt passieren, indem du dein HTML-Script einen AJAX-Request zu einem (LAN- oder WAN-)Server absetzen lässt, der dann die gesammelten Informationen für dich speichert, vollautomatisch, bspw. in einer SQL-Datenbank.

Viel Erfolg.