javascript Archive - Maximilian Krieg https://maximiliankrieg.de/tag/javascript/ Wissen, Technik & Erfahrungen Sat, 30 May 2026 20:14:41 +0000 de hourly 1 https://wordpress.org/?v=7.0 https://maximiliankrieg.de/wp-content/uploads/2026/05/cropped-20260524_logo_2_512-2-32x32.png javascript Archive - Maximilian Krieg https://maximiliankrieg.de/tag/javascript/ 32 32 Download von PDF-Dateien aus Viewer.js https://maximiliankrieg.de/2024/06/download-von-pdf-dateien-aus-viewer-js/ https://maximiliankrieg.de/2024/06/download-von-pdf-dateien-aus-viewer-js/#respond Sat, 01 Jun 2024 14:34:49 +0000 https://maximiliankrieg.de/?p=651 Heute bin ich auf eine Webseite gestoßen, die ein für mich interessantes PDF in einem Online-PDF-Reader bereitstellt. Dieser Reader verfügt normalerweise über eine Download-Funktion, die…

Der Beitrag Download von PDF-Dateien aus Viewer.js erschien zuerst auf Maximilian Krieg.

]]> Heute bin ich auf eine Webseite gestoßen, die ein für mich interessantes PDF in einem Online-PDF-Reader bereitstellt. Dieser Reader verfügt normalerweise über eine Download-Funktion, die in diesem Fall jedoch durch spezifische Einstellungen im JavaScript-basierten Reader deaktiviert wurde. In diesem Artikel beschreibe ich einen Weg diese Blockierung zu umgehen.

Ein direkter Download der Datei „mypdf.pdf“ unter Angabe des Pfades ist nicht möglich, da dies vom Webserver scheinbar selbst unterbunden wird. Der Quellcode der Webseite lautet wie folgt:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>Title</title>
<script src="pdf.viewer2.js"></script>
<link href="//mydata.com/data/mypdf.pdf" rel="preconnect">
<link href="//mydata.com/data/mypdf.pdf" rel="dns-prefetch">
</head>
Download der PDF-Datei unter Angabe der URL ist unterbunden

Nach kurzer Recherche im Internet fand ich den Hinweis, dass die relevanten Befehle des PDF-Readers in der Regel weiterhin vorhanden sind und daher direkt über die Konsole des Browsers gesteuert werden können. Dabei wird das für den Download relevante Klick-Event des ausgeblendeten Download-Buttons ausgelöst. Um dies zu erreichen, muss der folgende Befehl ausgeführt werden:

document.getElementById('download').click()
Manuelle Aktivierung des Klicks auf dem Download-Button via Konsole

Nach Ausführung des Befehls startet der Download der PDF-Datei. Es kann jedoch notwendig sein, wenn der PDF-Reader in einem iFrame eingebettet ist, dass die Webseite des iFrame vorher direkt aufgerufen werden muss.

Der Beitrag Download von PDF-Dateien aus Viewer.js erschien zuerst auf Maximilian Krieg.

]]> https://maximiliankrieg.de/2024/06/download-von-pdf-dateien-aus-viewer-js/feed/ 0 Simple Stoppuhr mit JavaScript und HTML (V2) https://maximiliankrieg.de/2017/03/simple-stoppuhr-mit-javascript-und-html-v2/ https://maximiliankrieg.de/2017/03/simple-stoppuhr-mit-javascript-und-html-v2/#respond Sun, 19 Mar 2017 22:08:00 +0000 https://maximiliankrieg.de/?p=2419 Auf die Rückfrage hin, ob ich die zuvor beschriebene Variante meiner simplen Stoppuhr noch weiter vereinfachen könnte, habe ich mich nochmal an den Code gesetzt und ihn…

Der Beitrag Simple Stoppuhr mit JavaScript und HTML (V2) erschien zuerst auf Maximilian Krieg.

]]> Auf die Rückfrage hin, ob ich die zuvor beschriebene Variante meiner simplen Stoppuhr noch weiter vereinfachen könnte, habe ich mich nochmal an den Code gesetzt und ihn etwas modifiziert. Eine allgemeine und sinnvolle Änderung ist die Positionierung der Aktionsfelder über der eigentlichen Ausgabe. Anstatt die Knöpfe zu deaktivieren, werden sie nun ausgeblendet, wodurch der Mauszeiger auf seiner aktuellen Position verweilen kann. Weiterhin wird in der neuen Variante, wie angefragt, auf eine Restart-Funktion verzichtet. Der Code hierzu findet sich im Artikel.

Ansicht der Stoppuhr

Wie in der folgenden Abbildung zu sehen ist, habe ich auf die Ausgabe der exakten Uhrzeit verzichtet, da diese primär zur Überprüfung in der vorherigen Variante genutzt wurde.

Darstellung der Zustände Start- und Stopp in der Stoppuhr

In Version 2 wird lediglich die summierte Zeit angezeigt und je nach aktuellem Zustand der zur Verfügung stehende Button.

Programmcode

<!DOCTYPE html>
<html>
<title>Stoppuhr</title>
<style>
    .myWatch {
        border: 1px solid black;
        margin: 1rem;
        padding: 1rem;
        background-color: grey;
        width: 25rem
    }
</style>

<body>
    <script>
        var runTime = 0;
        var startTime = 0;

        function addItem(varText) {
            var entry = document.createElement('li');
            entry.appendChild(document.createTextNode(varText));
            document.getElementById('myLog').appendChild(entry);
        }

        function init() {
            document.getElementById("btn_pause").style.display = "none";
        }

        function startWatch() {
            startTime = new Date();
            document.getElementById("btn_pause").style.display = 'block';
            document.getElementById("btn_start").style.display = 'none';
        }

        function pause() {
            runTime = runTime + new Date().getTime() - startTime.getTime();
            addItem("Laufzeit: " + runTime / 1000 + "s");
            document.getElementById("btn_start").style.display = 'block';
            document.getElementById("btn_pause").style.display = 'none';
        }
    </script>
    <div class="myWatch">
        <h1>Stoppuhr</h1>
        <input name="btn_start" id="btn_start" onclick="startWatch();" type="button" value="Start" />
        <input name="btn_pause" id="btn_pause" onclick="pause();" type="button" value="Pause" />
        <ol id="myLog"></ol>
    </div>
    <script>
        init();
    </script>
</body>

</html>

Der Beitrag Simple Stoppuhr mit JavaScript und HTML (V2) erschien zuerst auf Maximilian Krieg.

]]> https://maximiliankrieg.de/2017/03/simple-stoppuhr-mit-javascript-und-html-v2/feed/ 0 Simple Stoppuhr mit JavaScript und HTML https://maximiliankrieg.de/2016/01/simple-stoppuhr-mit-javascript-und-html/ https://maximiliankrieg.de/2016/01/simple-stoppuhr-mit-javascript-und-html/#respond Wed, 13 Jan 2016 22:15:00 +0000 https://maximiliankrieg.de/?p=2427 Vor einigen Tagen habe ich ein kleines JavaScript für ein Formular geschrieben, das zur Erfassung von Tätigkeitsdauern genutzt wird. Das Design und die Funktionsweise ist…

Der Beitrag Simple Stoppuhr mit JavaScript und HTML erschien zuerst auf Maximilian Krieg.

]]> Vor einigen Tagen habe ich ein kleines JavaScript für ein Formular geschrieben, das zur Erfassung von Tätigkeitsdauern genutzt wird. Das Design und die Funktionsweise ist sehr rudimentär gehalten, da keine genauen Anforderungen diesbezüglich spezifiziert wurden.

Die folgende Abbildung zeigt die exemplarische Anwendung von Start, Pause, Start, Pause und Ende. Danach beschreibe ich die grundlegenden Ideen hinter meiner Implementierung und den vollständigen Code.

Exemplarische Ausführung der Stoppuhr von Start bis Ende

Im folgenden Listing ist der vereinfachte HTML-Code und das entsprechende JavaScript aufgeführt. Mit einer Start-Pause-Funktion ist es möglich Unterbrechungen abzubilden. Die Steuerelemente werden dynamisch aktiviert und deaktiviert. Dies geschieht in Abhängigkeit der jeweiligen Zustände. Da das vordefinierte Formular ein paar technische Herausforderungen beinhaltet, habe ich mich gegen eine visuelle Repräsentation mit automatischer Aktualisierung entschieden. Stattdessen werden Zeitstempel gespeichert und angezeigt, um zeitliche Differenzen abzubilden.

<!DOCTYPE html>
<html>
   <title>Stoppuhr</title>
   <body>
      <script>
         function addItem(varText) {
            var entry = document.createElement('li');
            entry.appendChild(document.createTextNode(varText));
            document.getElementById('myLog').appendChild(entry);
         }

         function disableButtons(bStart, bPause, bEnd, bRestart) {
            document.getElementById("btn_start").disabled = bStart;
            document.getElementById("btn_pause").disabled = bPause;
            document.getElementById("btn_end").disabled = bEnd;
            document.getElementById("btn_restart").disabled = bRestart;
         }

         function restart() {
            runTime = 0;
            start();
         }

         function start() {
            startTime = new Date();
            addItem("Start:" + new Date());
            disableButtons(true, false, false, true);
			runState = 0;
         }

         function pause() {
			
            runTime = runTime + new Date().getTime() - startTime.getTime();
            addItem("Pause: " + new Date());
            addItem("Laufzeit: " + runTime / 1000 + "s");
            disableButtons(false, true, false, true);
			runState = 1;
         }

         function end() {
		    if (runState==0){
               runTime = runTime + new Date().getTime() - startTime.getTime()};
			
			if (runState==1){
			   //
			}
			   
            addItem("Ende: " + new Date());
            addItem("Laufzeit: " + runTime / 1000 + "s bzw. " + runTime / 60000 + "m");
            addItem("Aufgerundet: " + Math.ceil(runTime / 60000) + "m");
            disableButtons(true, true, true, false);
			runState=2;
         }
      </script>
      <h1>Laufzeit</h1>
      <ol id="myLog"></ol>
      <input name="btn_start" id="btn_start" onclick="start();" type="button" value="Start" />
      <input name="btn_pause" id="btn_pause" onclick="pause();" type="button" value="Pause" />
      <input name="btn_end" id="btn_end" onclick="end();" type="button" value="Ende" />
      <input name="btn_restart" id="btn_restart" onclick="restart();" type="button" value="Restart" />
      <script>
         var runTime;
         var startTime;
         var runState;
         restart();
      </script>
   </body>
</html>

Die folgende Abbildung zeigt die definierten Zustände meiner Stoppuhr. An dieser Stelle ist zu sagen, dass die Implementierung der Funktionen sicherlich besser machbar ist, aber für die definierten Anforderungen ausreichend ist.

Zustandswechsel beschrieben anhand der JavaScript-Funktionen

Der Beitrag Simple Stoppuhr mit JavaScript und HTML erschien zuerst auf Maximilian Krieg.

]]> https://maximiliankrieg.de/2016/01/simple-stoppuhr-mit-javascript-und-html/feed/ 0