Beiträge von Sempervivum

Sempervivum · 7. April 2018

Gleich hier bei HTML-Seminar anfangen:

https://www.html-seminar.de/css-flexbox.htm

Hier sehe ich auch häufig nach:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Einige erweiterte Möglichkeiten mit margin:

https://stackoverflow.com/ques…perties/33856609#33856609

Sempervivum · 6. April 2018

Manche sagen ja, "geht nicht - gibt's nicht" und das mit dem URL-Parameter funktioniert tatsächlich:

Seite 2 mit dem Button:

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="html-docx-js-master/dist/html-docx.js"></script>
    <script src="js/download.js"></script>
</head>
<body>
    <iframe id="iframe" src="save-as-docx-content.html"></iframe>
    <button onclick="save();">Als DOCX peichern</button>
        <script>
        function save() {
            $("#iframe").attr("src", "save-as-docx-content.html?save=true");
        }
    </script>
</body>
</html>

Alles anzeigen

Seite 1 mit der Tabelle:

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="html-docx-js-master/dist/html-docx.js"></script>
    <script src="js/download.js"></script>
</head>

<body>
    <table id="table">

    </table>
    <script>
        document.getElementById("table").innerHTML = "<tr><td>Zelle 1</td><td>Zelle 2</td></tr>";
        function save() {
            var thehtml = $("html");
            thehtml.find("script").remove();
            var doc = '<!doctype html><html>' + thehtml.html() + '</html>';
            var converted = htmlDocx.asBlob(doc, { orientation: 'portrait' });
            download(converted, "specification.docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document");
        }
        if (window.location.href.indexOf("save=true") != -1) save();
    </script>
</body>

</html>

Alles anzeigen

Sempervivum · 6. April 2018

Zitat

Also wenn ich z.B. einen Button auf Seite 2 betätige führt das dazu, dass für den Button auf Seite 1 die click() Methode ausgeführt wird.

Eigentlich kein Problem, aber leider wäre das, genau so wie das Auslesen des HTML, ein Cross-Domain-Zugriff und würde genau so vom Browser abgewiesen.

Was man versuchen könnte, ist, einen URL-Parameter beim Einbinden an die Seite 1 zu übergeben, die das Speichern veranlasst. Werde ich versuchen ...

Sempervivum · 6. April 2018

Zitat

Das Script siehst Du unter: https://www.preiswerter-buchen.de/traffics_resize.html

OK, das ist also das Skript. Und wo wird das eingebunden? Auf https://www.preiswerter-buchen.de/test/ liefert die Textsuche nach <script 136 Treffer!

Sempervivum · 6. April 2018

Jetzt wird mir das Problem klar: Bei mir funktioniert es, weil ich lokal mit einem Webserver teste. Du möchtest es jedoch lokal laufen lassen ohne Webserver. Und dann blockt Chrome es wegen Cross-Origin-Gesichtspunkten. Auf Anhieb fällt mir da keine Lösung ein. Einziehen mit PHP entfällt ja dann auch. Ich überlege weiter.

Sempervivum · 6. April 2018

Was funktioniert denn nicht? Lass den iFrame zunächst sichtbar - wird die Seite mit der Tabelle angezeigt? Wird der Speichern-Dialog eingeblendet, wo man das Verzeichnis auswählt? Kommen Fehler in der Console?

Sempervivum · 6. April 2018

Zitat

Jetzt wird mir die komplette Seite 1 angezeigt. Ich hatte jetzt den Ansatz nur den Button hier zu sehen, also den Rest im iFrame auszublenden

Wenn Du den iFrame nicht sehen möchtest, ist es kein Problem, ihn mit CSS und display:none unsichtbar zu machen.

Ich habe mal schnell ein Demo gemacht. Seite 2 mit dem Button und dem iFrame:

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="html-docx-js-master/dist/html-docx.js"></script>
    <script src="js/download.js"></script>
</head>

<body>
    <iframe id="iframe" src="save-as-docx-content.html"></iframe>
    <button onclick="save();">Als DOCX peichern</button>
        <script>
        function save() {
            var iFrame = document.getElementById("iframe");
            var thehtml = $(iFrame.contentWindow.document).find("html");
            thehtml.find("script").remove();
            var doc = '<!doctype html><html>' + thehtml.html() + '</html>';
            var converted = htmlDocx.asBlob(doc, { orientation: 'portrait' });

            download(converted, "specification.docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document");
        }
    </script>
</body>

</html>

Alles anzeigen

Und save-as-docx-content.html ist die Seite mit der Tabelle, die gespeichert werden soll und dem Skript, das sie erzeugt.

Aber möglicher Weise verstehe ich dich noch falsch.

Sempervivum · 6. April 2018

Da hatte entweder ich dich oder Du mich falsch verstanden. Du hattest geschrieben:

Zitat

kann ich diesen Button auch in eine andere HTML Seite einbauen, sodass aber trotzdem diese (mit der Tabelle) gespeichert wird?

Sagen wir Seite 1 ist die mit der Tabelle, die gespeichert werden soll und Seite 2 die mit dem Button. Auf Seite 2 wird jetzt Seite 1 in einem iFrame eingebunden. Drückt man den Button auf Seite 2 wird der Inhalt von Seite 1 aus dem iFrame eingelesen und gespeichert. Wenn dies nicht das ist, was Du dir vorgestellt hast, korrigiere mich.

Sempervivum · 5. April 2018

Auch das ist mit Flexlayout kein Problem. Hier wird beschrieben, wie man es mit margin:auto macht:

https://stackoverflow.com/ques…perties/33856609#33856609

Du brauchst nur dem p-Element ein margin-auto zu geben, dann rutscht der Button nach unten und das p-Element wird im freien Raum zentriert. Voraussetzung ist, dass genug Platz vorhanden ist.

Siehe Screenshot:

html-seminar.de/woltlab/attachment/1495/

Sempervivum · 5. April 2018

Der Grund, warum es nicht funktioniert, ist, dass die Seite, die eingebunden wird, auf einer anderen Domain liegt als die Elternseite. Daher wird der Zugriff auf den Inhalt dieses iFrame vom Browser geblockt. (Stichwort same-origin-policy). Unklar ist mir dann, warum es auf https://www.preiswerter-buchen.de/test/ funktionieren kann. Gib mir doch mal einen Hinweis, wo das Skript zu finden ist, das die Höhe anpasst.

Sempervivum · 5. April 2018

Gern geschehen.

Zitat

kann ich diesen Button auch in eine andere HTML Seite einbauen, sodass aber trotzdem diese (mit der Tabelle) gespeichert wird?

Auch dafür ist mir eine einfache Lösung eingefallen: Da dies offensichtlich nicht Cross-Domain ist, kannst Du das Dokument auf der Seite, wo der Button ist, in einen iFrame einlesen und von dort das HTML auslesen.

Sempervivum · 5. April 2018

PS: Ich habe einen Online-Viewer gefunden und damit wird die Tabelle korrekt angezeigt. D. h. das Skript funktioniert.

Sempervivum · 5. April 2018

Ich habe das htmtdocx mal getestet. Es läuft zwar ohne Fehlerausgaben durch, aber das Dokument ist leer. Dieses Problem wird hier diskutiert:

https://github.com/evidenceprime/html-docx-js/issues/19

und der Grund ist offenbar, dass OpenOffice, GoogleDocs etc. die Altchunk-Technologie unterstützen. Selber habe ich Softmaker-Office und dafür könnte das auch gelten. Sicher hast Du MS-Office, dann probiere doch Mal, ob es damit funktioniert.

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="html-docx-js-master/dist/html-docx.js"></script>
    <script src="js/download.js"></script>
</head>

<body>
    <table id="table">

    </table>
    <button onclick="save();">Speichern</button>
    <script>
        document.getElementById("table").innerHTML = "<tr><td>Zelle 1</td><td>Zelle 2</td></tr>";
        function save() {
            var thehtml = $("html");
            thehtml.find("script").remove();
            thehtml.find("button").remove();
            doc = '<!doctype html><html>' + thehtml.html() + '</html>';
            var converted = htmlDocx.asBlob(doc, {orientation: 'portrait'});

            download(converted, "specification.docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document");
        }
    </script>
</body>

</html>

Alles anzeigen

Sempervivum · 5. April 2018

Zu der Konvertierung nach docx habe ich dies gefunden:

https://github.com/evidenceprime/html-docx-js

Sempervivum · 5. April 2018

Zitat

kann ich diesen Button auch in eine andere HTML Seite einbauen, sodass aber trotzdem diese (mit der Tabelle) gespeichert wird?

Müsste ich überlegen, ob das möglich ist, ohne etwas serverseitiges einzubeziehen. Vielleicht hilft es aber schon, wenn Du den Button, ebenso wie die Skripts, aus dem DOM ausblendest.

Was das docx-Format betrifft, recherchiere ich mal ...

Sempervivum · 5. April 2018

Mir scheint, dass das Problem weniger das margin ist, sondern dass einfach der Platz nicht ausreicht. Wird der Platz noch knapper, überlappen sich Button und Schrift. Abhilfe, indem Du das Padding reduzierst.

Sempervivum · 5. April 2018

Ach so, das war nur Bequemlichkeit, dass ich jQuery vom CDN eingebunden habe. Du kannst jQuery herunterladen und lokal einbinden, dann wird es ohne Internetverbindung funktionieren.

Sempervivum · 5. April 2018

Da fällt mir nur etwas ein, das etwas kompliziert ist:

DOM mit jQuery einlesen, Skript-Elemente entfernen und das HTML speichern:

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>
</head>

<body>
    <table id="table">

    </table>
    <button onclick="save();">Speichern</button>
    <script>
        document.getElementById("table").innerHTML = "<tr><td>Zelle 1</td><td>Zelle 2</td></tr>";
        function save() {
            var thehtml = $("html");
            thehtml.find("script").remove();
            doc = '<!doctype html>' + thehtml.html();
            download(doc, "specification.html", "text/html");
        }
    </script>
</body>

</html>

Alles anzeigen

Das download.js bekommst Du hier:

https://github.com/rndme/download

Sempervivum · 5. April 2018

Nimm wie auf meinem Screenshot width:100% für das p-Element.

Sempervivum · 5. April 2018

Zitat

Ich hoffe es ist nicht zu viel verlangt, aber eine Ahnung warum mir der IE die Zeilenumbrüche nicht macht?

Nicht zu viel verlangt, nur immer her mit den Fragen

Stackoverflow weiß Rat:

https://stackoverflow.com/ques…ainer-doesnt-wrap-in-ie11

Setzt man das um, funktioniert es mit den Zeilenumbrüchen:

html-seminar.de/woltlab/attachment/1494/

Was die Navigation anbetrifft, so empfehle ich, auf float zu verzichten und sie ebenfalls auf Flexlayout umzustellen. Dann ist alles viel einfacher.

Beiträge von Sempervivum

Grid, Flexbox und andere CSS-Gemeinheiten

Speichern einer HTML Seite

Speichern einer HTML Seite

In iFrame resize integrieren

Speichern einer HTML Seite

Speichern einer HTML Seite

Speichern einer HTML Seite

Speichern einer HTML Seite

Vier Vierecke im Vollbild anpassbar

In iFrame resize integrieren

Speichern einer HTML Seite

Speichern einer HTML Seite

Speichern einer HTML Seite

Speichern einer HTML Seite

Speichern einer HTML Seite

Vier Vierecke im Vollbild anpassbar

Speichern einer HTML Seite

Speichern einer HTML Seite

Vier Vierecke im Vollbild anpassbar

Vier Vierecke im Vollbild anpassbar