PDF Rechnung mit eigenen Briefpapier

Shopware 5 Themes & Design
1

Das Thema war schon einmal hier im Forum aber so richtig habe ich noch eine Lösung gefunden.

Worum geht es?

Ein Kunden möchte gern das Design von seinem eigenen Briefpapier auch auf den Rechnungen vom Shop haben. Die einfachste und beste Variante wäre ein 300dpi Bild als Hintergrund einzubinden. Mittels CSS (background-images) wurde das Bild bei den PDF Einstellung “Body” eingebunden.

  1. Versuch das Bild mit 2780 Pixel x 3508 Pixel wird zwar angezeigt, aber die Position lies sich nicht einstellen. Das Bild hing irgendwo auf der Seite. Versuche mit background-position schlugen alle fehl.

  2. Versuch dann mit einem 96dpi Bild - ungefähr 794 px x 1123 px (ein Vorschlag aus diesem Forum). Das Bild ging zwar sauber über die ganze Seite, aber die Qualität kann man keinem anbieten. Logisch, die Auflösung reicht nicht aus.

Gibt es hier eine Möglichkeit ein eigenen Hintergrund mittels 300dpi Bild sauber einzubinden?

Könnte man hier einen Hintergrund definieren, könnte man sich Logo, Absenderzeile und den Footer sparen und man hätte als Shopbetreiber sein individuelles Briefpapier auch in den PDF-Rechnungen.

 

2

Hattest du dir mal die Doku von mpdf angesehen? Kanns gerade nicht ausprobieren, aber vielleicht hilft es: Backgrounds & Borders – What Else Can I Do – mPDF Manual

3

Zu Testzwecken habe ich mal bei Shopware_Components_Document die Funktion render() mit mpdf->watermarkImage() erweitert. Das Ergebnis sieht schon mal gar nicht so übel aus. Leider ist das ganze aber nicht Updatesicher. Wenn ich jetzt heraus finden würde, wie ich die Class Document per Plugin beeinflussen könnte, geht es in die richtige Richtung.

4

Hast du eine Lösung gefunden? Ich stehe aktuell vor der gleichen Anforderung.

5

Nein, aus Zeitgründen bin ich noch nicht so weit gekommen. Aktuell habe ich noch eine Notlösung die ich direkt in die Document.php eingetragen habe.

6

Hat jemand schon eine Lösung?

7

mPDF hat eigene Befehle um Hintergrundbilder zu positionieren. Hier findet man mehr:

https://mpdf.github.io/css-stylesheets/supported-css.html

Unser Hintergrundbild mit 3507 x 2480 px geht mit folgendem CSS sauber über die ganze Seite:

background-position: top left;
background-repeat: no-repeat;
background-image-resize: 4;
background-image-resolution: from-image;

 

1 „Gefällt mir“
8

Nun ja, viele Monate sind vergangen und noch immer gibt es keine richtige Lösung wie man eigenes Briefpapier mittels Hintergrundgrafik einbinden kann.

Die hier erwähnte CSS-Lösung kann ich so nicht bestätigen, denn in einem aktuellen SW 5.5.8 sieht dann mein Briefpapier in etwa so aus:

396×561 25.1 KB

Im Klartext, das Hintergrundbild sieht alles andere als schön aus. Im Template (index.tpl) habe ich das ganze so eingebunden:

body {
  {$Containers.Body.style}
  background-image: url('...Briefbogen_300.png');
  background-position: top left;
  background-repeat: no-repeat;
  background-image-resize: 4;
  background-image-resolution: from-image;
}

Meine bisherige Lösung sieht noch immer so aus:

//
// \engine\Library\Mpdf\mpdf.php
// Zeile 12694
//
$mpdf->showWatermarkImage = 1;
$mpdf->watermarkImage = '...Briefbogen_300.png';
$mpdf->watermarkImageAlpha = 1;
$mpdf->watermarkImgAlphaBlend = 'Multiply';

Erst hier wird das Hintergrundbild wirklich sauber dargestellt. Leider geht nun diese Variante nicht bei Subshops. Dort müsste man das ganze über die index.tpl löschen können. Und genau das ist das Problem!

9

Gibt es Neuigkeiten? 

10

Ja, in deiner index.tpl aus dem Document-Ordner einfach CSS einfügen:

body {
  {$Containers.Body.style}
  background-image: url(' hier link zum bild ');
  background-position: top left;
  background-repeat: no-repeat;
  background-image-resize: 4;
  background-image-resolution: from-image;
}

 

2 „Gefällt mir“
11

Hallo @R4M,
kannst Du hier einmal die Schritte aufzählen was du wo gemacht hast?
In welchem Format hast Du es eingebunden als PDF oder PNG?

12

Hierbei handelt es sich ja um eine zusätzliche CSS-Anweisung. Von daher geht nur JPEG bzw. PNG (für bessere Qualität).

Schritt 1:
Eigenes Theme anlegen (falls noch nicht vorhanden). Dann die „index.tpl“ in den Dokumenten-Ordner deines Theme legen.

Schritt 2:
Den oben erwähnten CSS-Code in deine „index.tpl“ einpflegen. Also mit den den Abschnitt body { … }

Schritt 3:
Natürlich dein PNG-Bild per FTP hochladen oder auch per Medienmanager. Dann die URL zum Bild (kompletter Pfad) bei „background-image“ eintragen.

Danach Cache löschen.

Mehr ist eigentlich nicht.

1 „Gefällt mir“