Wie du deinen Besuchern eine Druckversion deiner Beiträge mit CSS und AJAX zur Verfügung stellst

Viele Blogs stellen Ihren Besuchern aus unterschiedlichen Gründen eine Druckversion Ihrer Beiträge zur Verfügung.

Eine Möglichkeit kann sein, die Kundenbindung aufzubauen oder zu verstärken. Eine Andere ist, die Kopie des jeweiligen Beitrags als PDF zu verkaufen.

Egal, was deine Beweggründe sind: Eine druckbare Version des Beitrags muss erst einmal erstellt werden, bevor du sie anbieten kannst.

Warum sollte ich eine Druckversion zur Verfügung stellen?

Eine Druckversion zu erstellen kann ein paar Vorteile haben.

PayWall vor druckbare PDF's verwenden

Wenn du Blog-Beiträge an deine Besucher verkaufen möchtest, kannst du eine sogenannte "PayWall" einrichten. Mit einem Klick wird der Besucher auf die Transaktions-Seite von PayPal Express weitergeleitet.

Nach der erfolgreichen Transaktion kann der Besucher dann eine PDF-Version deines Beitrags herunterladen.

Marken-Stärke und Kundenbindung verbessern

Eine Druck-Version stärkt aber auch die Bindung zu deinen Besuchern.

Sobald ein Besucher eine PDF herunterlädt, weißt du dass ihn der Beitrag interessiert. Ein Logo deines Blogs in der PDF stärkt die Bindung zum Leser und die Bekanntheit deiner Marke.

Wenn du eine Druckversion verwendest solltest du das Ereignis-Tracking von Google Analytics verwenden. Dadurch kannst du feststellen, wie viele Leute sich wirklich für deine Beiträge interessieren.

Blogbeiträge viral machen

Der Besucher möchte die Beiträge gegebenenfalls nicht für sich selbst haben, sondern an einen Freund oder Kollegen senden.

Stelle für diesen wahrscheinlichen Fall sicher, dass der Link zum Original-Beitrag im PDF enthalten ist.

Durch das Versenden einer solchen PDF kann ein Beitrag ebenfalls viral werden. Es muss nicht immer auf Facebook und Co. zurückgegriffen werden, damit ein Besucher den Beitrag teilt.

Wie kann ich eine Druckversion zur Verfügung stellen?

In den meisten Fällen erstellen Blogger eine unabhängige PDF-Datei Ihres Blog-Beitrags. Das kann recht umständlich sein. Denn es wird ein Programm wie Adobe InDesign für die Erstellung von guten PDF's benötigt, was ein paar Nachteile mit sich bringt:

• Du musst dich zunächst in das Programm einarbeiten, bevor du die umfangreichen Funktionen verwenden kannst
• Ein Programm zum Erstellen einer Druckversion ist nicht gerade billig
• Nachdem du deinen Beitrag aktualisiert hast, solltest du auch die Druck-Version aktualisieren

Und wenn du dich eher in der Rolle des Entwicklers der Webseite siehst, hast du dir bestimmt schon Gedanken über eine einfachere Variante gemacht.

Die automatische Erstellung von PDF's aus deinen Beiträgen

Besser wäre es doch, wenn du den Besucher dazu bringst eine PDF aus dem Blog-Beitrag über die "Drucken"-Funktion zu erstellen.

Dabei gibt es aber ein Problem(chen): Es wird nicht nur der Beitrag an sich ausgedruckt, sondern auch der Header, der Footer, die Sidebar und mehr unnötige Elemente des Artikels. Das kann in einer PDF nicht nur den Lese-Fluss stören, sondern auch das ganze Layout kaputt machen.

Mit CSS können alle Elemente entfernt werden, die nicht gedruckt werden dürfen. Dafür gibt es den "@media print"-Selektor. Damit können bestimmte Bereiche deiner Seite von der Druckversion entfernt werden. Aber sobald du Änderungen an der HTML-Struktur deiner Webseite vornimmst, kann es sein dass die Regeln wieder angepasst werden müssen.

Du erkennst vielleicht, dass im besten Fall eine unabhängige Print-Version der Beiträge erstellt werden sollte.

Und mit einem kleinen Skript geht das auch!

Druckversionen zur Verfügung stellen ohne eine PDF vorzubereiten

Das fertige Script habe ich natürlich schon vorbereitet und getestet. Mit einem Klick auf diesen Button kannst du es ebenfalls testen:

Diese Seite als PDF drucken

Beachte bitte, dass du bereits ein wenig JavaScript-, PHP- und HTML/CSS-Kenntnisse benötigst, wenn du das folgende Skript vollständig verstehen möchtest.

Die Idee hinter der Druck-Funktion

Grundsätzlich gibt es ein paar Schritte, die du beachten solltest, wenn du eine solche Funktion erstellen willst. Für meinen Print-Algorithmus habe ich mich für den folgenden Ablauf entschieden:

1. Klick auf den Button zur Druck-Version
2. Aufruf einer AJAX-Abfrage
3. Bereitstellen der HTML/CSS Print-Version per PHP
4. Zusenden der Print-Version an das JavaScript
5. Aufruf der Druck-Funktion in einem neuen Fenster

Für das folgende Script habe ich folgende Bibliotheken verwendet, die du in dein Projekt hinzufügen solltest:

• jQuery
  Du musst nicht zwangsläufig jQuery verwenden. Wenn du dich mit JavaScript auskennst, kannst du das Skript auch ohne diese "Schwerlast" umsetzen.
  Verwende am besten die neueste Version, es sollte aber keinen Unterschied machen, wenn du eine ältere Version verwendest.
  Link zum Download: jQuery downloaden
• Font Awesome
  Für die Animation während das AJAX-Script lädt, verwende ich normalerweise Font Awesome.
  In den Beispielen wird dir auch ganz genau erklärt, wie du Font Awesome verwendest und wie die sogenannten "Spinner" funktionieren.
  Link zum Download: Font Awesome downloaden

Das Auslösen der Druck-Funktion

Zunächst kannst du den Button in HTML und CSS vorbereiten, den wir verwenden werden um die JavaScript-Funktion zu starten.

<button class="print_version"<Diese Seite als PDF drucken</button>
<span class="print_load" style="display: none;">
	<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
</span>

Den Button kannst du mit CSS formatieren wie du möchtest, oder ihn so belassen wie der Browser es vorgibt. Beachte aber, dass jeder Browser einen Button unterschiedlich formatiert. Um einen einheitlichen Stil zu erhalten, solltest du also CSS verwenden.

Ein Beispiel:

button.print_version {
	padding: 8px 14px;
	background-color: #000000;
	border: 1px solid #000000;
	border-radius: 0;
	color: #ffffff;
	transition: background-color .5s, color .5s;
}
button.print_version:hover,
button.print_version:active,
button.print_version:focus {
	background-color: transparent;
	color: #000000;
}

Der Aufruf der Druck-Funktion

Beim Aufruf der Druck-Funktion binde ich alle Elemente mit der Klasse "print_version" durch einen Klick an eine Funktion. Diese Funktion hat 2 Aufgaben: Die Lade-Animation anzeigen und eine weitere Funktion "getPrintVersion" aufrufen.

Das Lade-Element übergebe ich an die getPrintVersion-Funktion, damit diese die Lade-Animation selbstständig ausschalten kann, sobald sie fertig ist.

(function($) {
	
	$( document ).ready( function() {
		$( '.print_version' ).each( function() {
			
			var printBtn = $( this );
			printBtn.unbind( 'click' );
			printBtn.bind( 'click', function() {
				
				var loader = printBtn.siblings( '.print_load' );
				loader.show();
				
				getPrintVersion( loader );
				
			});
			
		});
	});
	
})(jQuery);

Vergiss beim "bind" nicht eine "unbind"-Funktion zu setzen. Sollte es durch einen Fehler der Fall sein, dass dieses Skript mehr als ein mal ausgeführt wird, so wird die Funktion getPrintVersion auch öfters mit einem Klick aufgerufen. Das ist ein Programmier-Fehler der vermieden werden sollte.

Die AJAX-Funktion des Drucken-Skripts

Nun erstellen wir die Funktion "getPrintVersion". Diese sollte unmittelbar unter dem Aufruf "$( document ).ready()" platziert werden, damit wir jQuery als "$" verwenden können.

In der Funktion "getPrinterVersion" wird eine AJAX-Abfrage erstellt, die ein PHP-Skript während der Laufzeit der Webseite aufruft. Durch eine AJAX-Abfrage können Inhalte der Webseite nachgeladen werden, ohne dass die Seite neu geladen wird.

In der AJAX-Funktion verbergen sich einige Daten, die an das PHP-Skript übergeben werden. Diese Daten findest du im Objekt "data". Durch den Wert "action" kann im PHP-Skript überprüft werden, welche Funktion das AJAX aufrufen möchte. Mehr dazu später in der PHP-Funktion.

Zudem beinhaltet das Skript eine "success"-Funktion, die aufgerufen wird sobald das PHP-Skript Daten zurück gibt. Diese Funktion lässt die Lade-Animation verschwinden und ruft eine weitere Funktion "openPrinter" auf, die sich um die Darstellung der Print-Version in einem neuen Fenster kümmert.

function getPrintVersion( loader ) {
	var ajax_url = 'ajax.php'; // Dieser Pfad muss zu deinem PHP-Skript führen
	var post_id = 1; // Ändere diese ID je nach Beitrag ab. Eine Lösung für WordPress wird nachfolgend genannt
	$.ajax({
		url: ajax_url,
		method: 'POST',
		cache: true,
		data: {
			'action':	'printversion',
			'id':		1
		},
		success: function( data ) {
			
			loader.hide();
			
			data = $.parseJSON( data );
			openPrinter( data.html, data.title );
			
		}
	});
}

Bevor wir zum PHP-Skript kommen, erstellen wir nun als nächstes die Funktion "openPrinter". Diese Funktion ist recht einfach aufgebaut. Durch den Algorithmus erstellen wir ein neues Fenster, dass die Druck-Version beinhaltet.

In dieser Funktion wird der HTML-Code der Druck-Version und der Titel übergeben.

function openPrinter( jsonHTML, title ) {
	
	if( typeof title === "undefined" ) title = document.title;
	
	var printVersion = $.parseJSON( jsonHTML );
	var printWindow = window.open( '', title, 'width=800,height=600' );
	printWindow.document.write( printVersion );
	
	printWindow.document.close();
	
	printWindow.focus();
	printWindow.print();
	printWindow.close();
}

Die dynamische Druck-Version in PHP aufbauen

Das PHP-Skript beinhaltet sowohl die Steuerung, welche AJAX-Abfrage aufgerufen wird, als auch die Aufbereitung und Struktur des HTML-Inhalts für die Druck-Version.

Ich verwende gerne ob-Funktionen ("ob_start()" und "ob_get_clean()"), um HTML-Inhalte in meinem Quellcode-Editor besser darstellen zu lassen. Mit der Funktion "ob_start()" wird sozusagen eine Aufnahme der nachfolgenden Ausgaben erstellt und mit "ob_get_clean()" wieder gestoppt. Zudem gibt die Funktion "ob_get_clean()" die komplette Ausgabe als Zeichenkette zurück, die du in eine Variable sichern kannst.

Verwende regelmäßig Funktion "json_encode()", um deine Codes verkleinert zu übertragen. Damit kannst du auch super Arrays in eine Zeichenkette wandeln und in jQuery mit "$.parseJSON" wieder in eine Array zurückverwandeln.

Ich habe im nachfolgenden PHP-Skript bedacht, dass du eventuell kein Content Management System verwendest. Du kannst das Skript nach belieben ändern, damit du die Inhalte aus deinem CMS oder der Datenbank heranziehen kannst. Eine Version für WordPress findest du im nächsten Abschnitt.

<?php 
	
	switch( $_POST ) {
		case 'printversion':
			echo render_printversion();
		break;
		default: echo ""; break;
	}
	
	function render_printversion() {
		
		$id = $_POST;
		
		ob_start();
		?>
			<!DOCTYPE html>
			<html>
				<head>
				<title><?php echo $post; ?></title>
					<style>
						body {
							font-family: Arial, sans-serif;
						}
					</style>
				</head>
				<body>
					<h1><?php echo $post; ?></h1>
					<?php echo $post; ?>
				</body>
			</html>
		<?php
		$html = json_encode( ob_get_clean() );
		$title = $post;
		
		$printData = array(
			'html'	=> $html,
			'title'	=> $title
		);
		
		return json_encode( $printData );
		
	}
	
	$post = array(
		1	=> array(
			'title'		=> 'Title 1',
			'content'	=> 'Lorem ipsum dolor sit amet'
		),
		2	=> array(
			'title'		=> 'Title 2',
			'content'	=> 'Lorem ipsum dolor sit amet'
		)
	);
	
?>

Denke dran, dass du einen PHP-Fähigen Server benötigst, um dieses Programm auszuführen. Da das aber der Standard im Web ist, gehe ich davon aus, dass du einen PHP-Fähigen Server verwendest.

WordPress Drucken-Button ohne Plugin

In WordPress musst du das PHP-Skript für AJAX ein wenig anders handhaben. Damit du die WordPress-Eigenen Funktionen verwenden kannst, musst du die PHP-Funktion "render_printversion" in den Kontext von WordPress einbinden. Ansonsten kennt das System deine PHP-Funktion nicht und kann ihm auch keine Daten wie Beiträge zur Verfügung stellen.

Nachfolgend findest du den angepassten PHP-Code für WordPress:

<?php
	add_action( 'wp_ajax_printversion', 'render_printversion' );
	add_action( 'wp_ajax_nopriv_printversion', 'render_printversion' );
	function render_printversion() {
		
		if( !empty( $_POST ) )
			$id = $_POST;
		else
			$id = url_to_postid( wp_get_referer() );
		
		$post = get_post( $id );
		
		ob_start();
		?>
			<title><?php echo $post->post_title; ?></title>
			<!DOCTYPE html>
			<html>
				<head>
					<style>
						body {
							font-family: Arial, sans-serif;
						}
					</style>
				</head>
				<body>
					<?php
						if( !empty( $thumb = get_the_post_thumbnail_url( $post ) ) ) {
							?>
								<img src="<?php echo $thumb; ?>" width="100%" alt="<?php echo $post->post_title; ?>" />
							<?php
						}
					?>
					<h1><?php echo $post->post_title; ?></h1>
					<?php echo do_shortcode( $post->post_content ); ?>
				</body>
			</html>
		<?php
		$html = json_encode( ob_get_clean() );
		$title = $post->post_title;
		
		$printData = array(
			'html'	=> $html,
			'title'	=> $title
		);
		
		wp_die( json_encode( $printData ) );
		exit;
		
	}
?>

In dieser angepassten Version berücksichtige ich die Möglichkeit einen anderen Beitrag auszuwählen, als der den der Benutzer gerade vor dem Bildschirm hat. Dadurch kannst du zum Beispiel ein Archiv aller Beiträge mit der Druckfunktion erweitern.

Sollte die ID über die AJAX-Funktion von JavaScript nicht gesetzt sein, wird die Druck-Version des Beitrags erstellt, auf der sich der Benutzer aktuell befindet. Das funktioniert mit der WordPress-Funktion "url_to_postid( wp_get_referer() )".

Hast du Anmerkungen oder Probleme zu diesen Skripten? Schreibe in den Kommentaren. Ich versuche dir gerne nach Möglichkeit zu helfen.

Zu den Beiträgen