Drucken in jedem Browser

von

Wie sich der Druck-Dialog von diversen Browsern per JavaScript öffnen läßt.

Übersicht

Im Zuge der Coronavirus Pandemie müssen jetzt plötzlich sehr viele Menschen im HomeOffice arbeiten, die das zuvor noch nie gemacht haben. Bei unserem Kunden sind davon viele tausend Mitarbeiter betroffen. Die IT Abteilung hat für die betroffenen Kollegen eine Art Checkliste mit allen wichtigen Anforderungen zusammengestellt. Bei der Veröffentlichung dieser Checkliste als PDF-Datei im Intranet war ein Ziel, den Ausdruck der Datei den Mitarbeitern so einfach wie möglich zu machen.

Problemstellung

Je nach Einstellung des Intranets, aber auch der persönlichen Browsereinstellungen, werden die im Intranet zur Verfügung gestellten PDF-Dateien üblicherweise von den diversen beim Kunden im Einsatz befindlichen Webbrowsern direkt im Browserfenster geöffnet oder aber als Datei heruntergeladen. Der ein oder andere Anwender hat dann eventuell das Problem, dass er den Drucken-Knopf in der geöffneten PDF-Datei nicht finden kann. Oder er hat Schwierigkeiten, die heruntergeladene Datei auf seinem PC zu finden und zu öffnen.

Aus diesem Grund wurde eine Möglichkeit gesucht, den Ausdruck der Chechliste für die Anwender so einfach wie möglich zu gestalten. Es wurde sich ein Drucken-Knopf direkt in der Intranetseite gewünscht.

Mit JavaScript läßt sich das normalerweise sehr einfach realisieren. Allerdings sind beim Kunden diverse, leider auch ältere Webbrowser am Start. Die Spanne reicht von Internet Explorer 11 (im Kompatibilitätsmodus IE10), Google Chrome, Firefox, Microsoft Edge, MS Chromium Egde (beta) und weitere Browser. Bei meinen ersten Tests habe ich bemerkt, dass die üblichen JavaScript-Lösungen um den Drucken-Dialog des Browsers zu öffnen beim Internet Explorer 11 nicht funktionieren. Andererseite ist es leider so, dass die spezielle IE11-JavaScript-Drucken-Lösung wirklich nur mit dem Internet Explorer 11 funktioniert und mit sonst keinem weiteren Browser.

Lösungsansatz und Umsetzung

Wegen des Zeitdrucks durch die fortschreitende Coronavirus Pandemie habe ich mich für die Holzhammermethode entschieden und eine Lösung implementiert, die zwar sehr verschwenderisch in Punkto Ressourcen ist, die aber dafür mit allen beim Kunden verwendeten Webbrowsern funktioniert. Sie ist deswegen verschwenderisch, weil sie 3 statt nur 1 HTTP Request auslöst.

<object id="objectPdf" data="my.pdf" type="application/pdf" width="1" height="1">
    alt : <a href="my.pdf">my.pdf</a>
</object>

<iframe id="iFramePdf" src="my.pdf" style="display:none;"></iframe>

<input type="button" value="Print PDF" onclick="printTrigger();" />

<script type="text/javascript">
    function printTrigger() {
        try {
            document.getElementById('objectPdf').printWithDialog();
        } catch(e) {
            document.getElementById('iFramePdf').contentWindow.print();
        }
    }
</script>

Die Holzhammermethode kurz erklärt: Zuerst wird die PDF-Datei als Objekt mit Größe 1x1 Pixel geladen, aber wegen der Größe nicht angezeigt. Danach wird die PDF-Datei in einen iFrame geladen, der aber nicht angezeigt wird. Der Drucken-Knopf wird mit der JavaScript Funktion printTrigger() verbunden. Diese Funktion versucht zuerst auf dem herkömmlichen Weg mit printWithDialog() den Drucken-Dialog mit der geladenen PDF-Datei zu öffnen. Falls dies fehl schlägt wird der Drucken-Dialog mit der alternativen Methode print() geöffnet.

Ich habe diese Lösung an Stack Overflow zurückgespielt bei dem Thread Javascript .print() Failing with IE11 for type application/pdf und dort die getesteten Browserversionen angegeben.

Ergebnis

Die aktuellen Umstände haben es erforderlich gemacht, eine schnelle Umsetzung herbeizuführen. Die vorgestellte Lösung führt serverseitig zu geringfügig höherer Last und ist deshalb mit Bedacht zu übernehmen. Im vorliegenden Fall war es genau die richtige Entscheidung.

Kategorien: JavaScript

Zurück