This contents is also available in English.

Layout der Magento PDF-Rechnung anpassen

Mit meiner Advanced Invoice Layout Magento-Extension lässt sich das Standardlayout der PDF-Rechnung, des PDF-Lieferscheins und der PDF-Gutschrift sehr einfach via HTML/CSS anpassen.

In dieser Anleitung beschreibe ich einige häufige Use-Cases für die PDF-Rechnung in Magento und wie man das Layout mit meiner Magento Extension sehr einfach anpassen kann. Einige Beispiele gefällig? Sehen Sie sich die PDF-Rechnungslayouts meiner Kunden an.

PDF-Layouts für Magento 1 anpassen

  • Die CSS-Dateien befinden sich im Verzeichnis skin/frontend/base/default/advancedinvoicelayout/default/css/ der Magento-Installation. Zusätzlich zu den regulären CSS-Dateien liefern wir auch die Original-SASS-Dateien mit, mit denen sich die CSS-Dateien noch leichter anpassen lassen.
  • Die HTML-Dateien, aus denen die PDF-Rechnung generiert wird, befinden sich im Verzeichnis app/design/frontend/base/default/template/advancedinvoicelayout/default/.

Die PDF-Dokumente können über folgende Aktionen gedruckt werden:

  • Verkäufe › Rechnungen › Aktionen › PDF-Rechnung drucken über das Grid oder über
  • Verkäufe › Rechnungen › Rechnung auswählen › PDF-Rechnung drucken auf der Rechnungsdetailseite
Die Vorgehensweise für Lieferscheine und Gutschriften ist selbstverständlich analog.
Die Dokumente werden jeweils on-the-fly generiert, d.h. Änderungen an den HTML/CSS-Dateien sind sofort sichtbar.

Generell empfiehlt es sich, zum Testen von Layouts immer den Debug-Modus der Advanced Invoice Layout Extension unter System › Konfiguration › Advanced Invoice Layout zu aktivieren. Bei aktiviertem Debug-Modus wird bei jedem Druck der PDF-Rechnung, des -Lieferscheins oder der -Gutschrift das temporär erzeugte HTML-Dokument im Verzeichnis var/tmp/invoice_debug.html gespeichert. Dies ermöglicht Ihnen einfacher, die HTML-Struktur und die Style-Sheets zu analysieren und anzupassen.
In Produktiv-Umgebungen sollte dieses Feature aus Performance-Gründen nicht dauerhaft aktiviert sein.

Eigenes Theme erstellen

Standardmäßig wird die Advanced Invoice Layout Extension mit dem default-Theme ausgeliefert, das für die meisten Anwendungsfälle bei unseren Kunden sehr gut geeignet ist und aus Usability optimiert ist. Selbstverständlich ist es aber sehr einfach möglich, eigene Themes zu erstellen und z.B. für verschiedene StoreViews unterschiedliche Layouts zu verwenden. Ein Theme ist hierbei ein über HTML/CSS angepasstes Layout.

Für die folgenden Schritte sind grundlegende Entwickler-Kenntnisse von Vorteil.

Um ein eigenes Theme zu erstellen müssen folgende Schritte durchgeführt werden:

  • Hinzufügen des Themes mit Code "EIGENES-THEME" in app/code/community/Vianetz/AdvancedInvoiceLayout/etc/config.xml (oder idealerweise über ein separates Modul, da alle XML-Dateien zur Runtime verbunden werden)
    <default>
        <advancedinvoicelayout>
            <themes>
                <default title="Default PDF layout by vianetz"/>
            </themes>
    
  • Kopieren aller Dateien im Verzeichnis app/design/frontend/base/default/template/advancedinvoicelayout/default nach app/design/frontend/base/default/template/advancedinvoicelayout/EIGENES-THEME
  • Kopieren aller Dateien im Verzeichnis skin/frontend/base/default/template/advancedinvoicelayout/default nach skin/frontend/base/default/template/advancedinvoicelayout/EIGENES-THEME
  • Anpassungen an den HTML/CSS-Dateien in den neuen Verzeichnissen vornehmen
  • Magento Cache leeren
  • Anschließend kann das eigene Theme in System › Konfiguration › Advanced Invoice Layout ausgewählt werden

Unterschiedliche PDF-Layouts pro Store

Prinzipiell haben Sie hierzu mehrere Möglichkeiten:

Unter System › Konfiguration › Advanced Invoice Layout können Sie nach der Installation der Extension bereits StoreView-abhängige Einstellungen vornehmen. Hierzu müssen Sie einfach im Store-Switcher oben links entsprechend den gewünschten Store auswählen und die Einstellungen vornehmen.

Wenn Sie darüberhinaus auch Layout-Anpassungen an den HTML/CSS-Dateien vornehmen möchten, gibt es 2 Möglichkeiten:

  • Wenn Sie für die Stores bereits unterschiedliche Magento-Themes verwenden, können Sie einfach die Anpassungen im entsprechenden Theme-Folder vornehmen. D.h. Sie nehmen die Anpassungen z.B. in app/design/frontend/theme1/default/advancedinvoicelayout und app/design/frontend/theme2/default/advancedinvoicelayout vor.
  • Darüberhinaus gibt es auch die Möglichkeit (z.B. wenn Sie dasselbe Theme für beide Stores verwenden) eigene Themes im Advanced Invoice Layout Modul anzulegen.

Häufige Fragen zum Magento PDF Layout

Change font family in Magento PDF invoice layout
Siehe hier.
Attribute der Bestellung auf der Magento Rechnung oder dem Lieferschein anzeigen

Um individuelle Felder/Attribute aus der Bestellung auf der PDF-Rechnung, dem -Lieferschein oder der -Gutschrift anzeigen zu können, gibt es mit unserem Advanced Invoice Layout Modul 2 Möglichkeiten (hier anhand des fiktiven Attributs my_attribute auf der Magento-Bestellung):

  • Über die Konfiguration kann in allen Textfeldern, z.B. im Freitext-Feld der Platzhalter {{var order.getMyAttribute()}} verwendet werden oder
  • es können direkt die PHP/HTML-Templates editiert werden und folgender Code an entsprechender Stelle eingefügt werden:
    echo $this->getOrder()->getMyAttribute();
Artikeloptionen nebeneinander anzeigen

Mit folgendem CSS-Code können die Artikel-Optionen in den Magento PDF-Layouts anstatt in einer Liste nebeneinander angezeigt werden:

#itemTable ul.itemOptionList { list-style-type: none;  padding: 0; }
#itemTable ul.itemOptionList li { display: inline; }
Available Variables for Magento PDF Layouts
Siehe hier.
Cyrillic characters are displayed as "?" on the Magento PDF invoice. What can I do?

The problem is that the chosen font family does not support the Cyrillic characters. So far no font with Cyrillic support is included into the Advanced Invoice Layout Extension. That means that you have to get your own font family with support for Cyrillic characters and include it into the Advanced Invoice Layout Extension.

Please also see my FAQ article about adding a new font.

Das Magento PDF-Layout wird nicht korrekt angezeigt - was kann ich tun?

Wenn Sie meine Advanced Invoice Layout Extension für die Anpassung des PDF-Layouts von Rechnungen, Lieferscheinen und Gutschriften verwenden und das PDF nicht wie gewünscht gedruckt wird, gibt es mehrere Fehlermöglichkeiten:

  • Falls Sie URLs in dem Layout verwenden, muss in der PHP-Konfiguration die Option allow_url_fopen aktiviert sein.
  • Wurde die Extension gemäß der Installationsanleitung installiert? Sind insbesondere alle Dateien korrekt hochgeladen?

Falls sich Ihr Problem damit nicht beheben lässt, kontaktieren Sie mich gerne.

How can I access the base64-encoded PDF file?

There may be circumstances where you need the base64-encoded value of one of the PDF documents in Magento 2 like creditmemo, e.g. for sending it other 3rd-party systems.

This can easily be achieved with the following sample code. This code assumes that you have \Vianetz\AdvancedInvoiceLayout\Model\PdfManager $pdfManager and e.g. \Magento\Sales\Api\CreditmemoRepositoryInterface $creditmemoRepository available, for example via Constructor Dependency Injection or as shown by direct Magento 2 Object Manager creation.

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$pdfManager = $objectManager->create('Vianetz\AdvancedInvoiceLayout\Model\PdfManager');
$creditmemo = $objectManager->create('Magento\Sales\Api\CreditmemoRepositoryInterface')->get($creditmemoId);

$pdfManager->addSource($creditmemo);

// output the base64-encoded value
echo base64_encode($this->pdfManager->getPdf()->getContents());

This code uses parts of my PDF API for Magento.

How can I force a page break in the Magento invoice PDF?

A page break can be forced in the invoice PDF by adding an HTML element with the CSS class pageBreak.

Migrate Advanced Invoice Layout templates from Magento 1 to Magento 2

If you use our Advanced Invoice Layout extension for Magento 1 and you want to migrate your shop to Magento 2, there are a few simple steps to make the invoice, packing slips and creditmemo PDF look nice:

  • Purchase the Advanced Invoice Layout extension for Magento 2
  • Copy all your template files from the Magento 1 extension from app/design/frontend/base/default/template/advancedinvoicelayout to the Magento 2 extension in view/base/templates/
  • Copy all the CSS files from Magento 1 from skin/frontend/base/default/advancedinvoicelayout to the Magento 2 extension in view/base/web/
  • Replace all occurrences of $this->__( .. %s .. ) with $this->__( .. %1 .. )
Schweizer QR-Rechnung mit Magento generieren
Siehe hier.
Wie kann ich das Adressformat konfigurieren?
Siehe hier.
Wie kann ich die Übersetzungen in den PDF-Dokumenten ändern?

Jedes Modul wird mit Übersetzungsdatei im Verzeichnis app/locale/.. ausgeliefert. Je nach gewünschter Sprache (z.B. deutsch) befindet sich in der Datei im Unterverzeichnis de_DE/Vianetz_AdvancedInvoiceLayout.csv alle verwendeten Text-Strings.
Alternativ können die Texte auch über die Magento Inline-Translation im Backend geändert werden.

Wie kann ich zusätzliche Hinweise für Firmenkunden auf die PDF-Rechnung drucken?

Die Advanced Invoice Layout Extension bietet die Möglichkeit, kundengruppenspezifische Rechnungstexte unter Kunden › Kundengruppen im Magento Backend zu hinterlegen.

Damit können z.B. benötigte Hinweise für Firmenkunden oder Notizen wie "Steuerbefreit gemäß Paragraph X" oder "Steuerschuldnerschaft des Leistungsempfängers / Reverse-Charge-Verfahren" in die PDF-Rechnung hinzugefügt werden:


Magento Kundengruppen-Konfiguration
Wieso wird die Steuer doppelt in der Rechnung ausgewiesen?

Die Konfigurationsoption System › Konfiguration › Steuern › Anzeige in Bestellungen, Rechnungen, Gutschriften › Steuern vollständig anzeigen beeinflusst dieses Verhalten. Im Frontend kann der Kunde auf den Steuersatz klicken und erhält die Aufsplittung in die einzelnen Mehrwertsteuerklassen. In den Emails und PDF-Dokumenten ist dies allerdings ungünstig, da hier alle Steuersätze + der Gesamtsteuersatz angezeigt werden und somit redundante, doppelte Informationen vorliegen, die Kunden eher verwirren.

Die Advanced Invoice Layout Extension berücksichtigt diesen Fall und zeigt - je nach Einstellung - nur den Gesamtsteuersatz oder nur die aufgesplitteten Steuersätze nach ihrem Prozentsatz.

Sofern nur 1 Steuersatz vorliegt könnte theoretisch auch die Steuerbezeichnung in den Übersetzungen geändert werden, dies ist aber ausdrücklich nicht empfohlen.

Zahlart auf der Magento PDF-Rechnung anpassen
Siehe hier.

Beispiele für PDF-Layouts von Kunden

Im Folgenden zeige ich einige Beispiele aus realen Magento Online-Shops unserer Kunden, die mit der Advanced Invoice Layout Extension das PDF-Rechnungslayout angepasst haben:

Das Magento PDF-Layout von Kleine Steinzeit überzeugt durch ein professionelles Erscheinungsbild.
Kunde seit 2013
Magento Rechnungs-PDF von Serrano Days bietet ein sehr ansprechendes, aufgeräumtes Layout.
Kunde seit 2014
Das PDF-Rechnungslayout von Ingrid zeigt ein kompaktes, professionelles Design.
Kunde seit 2011
Das Layout von besugre.com ist sehr minimalistisch und simpel gehalten.
Natürlich wird auch das vianetz Rechnungslayout für unsere Extension-Kunden über die Extension angepasst.
Dank des Advanced Invoice Layout-Standardlayouts konnte das reprogress-Design schnell und einfach angepasst werden.
Kunde seit 2014
Die Firma econcess hat das Design der PDF-Rechnungen für den Online-Shop fugos.de mit Hilfe der Advanced Invoice Layout Extension individuell und äußerst ansprechend gestaltet.
Kunde seit 2014
Über die integrierte Briefpapier-Funktionalität des Advanced Invoice Layout-Moduls konnte hairlando.de sein Rechnungslayout sehr einfach an seine Bedürfnisse anpassen.
Kunde seit 2013
Seit der ersten Version werden die PDF-Rechnungen von wekonn.de durch das Advanced Invoice Layout-Modul erfolgreich umgesetzt.
Kunde seit 2009
Ein sehr schönes, individuelles PDF-Layout wird im Shop von werkzeugheld.com durch meine Advanced Invoice Layout Extensiongeneriert.
Kunde seit 2017
Auch für meinen Kunden weine.de generiert das Advanced Invoice Layout-Modul ansprechende PDF-Rechnungen und versendet diese per Email.
Kunde seit 2013
Schön individualisiert hat unser Kunde Barolo & Champagne die PDF-Rechnungen und -Lieferscheine mit dem Advanced Invoice Layout-Modul.
Kunde seit 2016
Das Advanced Invoice Layout Modul kommt auch bei magflags.de zum Einsatz, inkl. erweiterter Funktionen wie Barcode-Anzeige.
Kunde seit 2014
Ich habe einige Layout-Anpassungen am Advanced Invoice Layout Modul für meinen Kunden ubpbio.com vorgenommen.
Kunde seit 2020

Wenn Sie meine Magento Extension im Einsatz haben und gerne Ihr PDF-Layout hier präsentieren möchten oder eine Aufnahme als PDF-Template in die Extension ermöglichen können, freue ich ich jederzeit über eine Kontaktaufnahme.