Eric: html2pdf CSS Probleme

Hallo,

ich hänge nun schon seid tagen an dem gleichen Problem. Ich komme einfach nicht weiter.

Hier erstmal der Code um den es geht:

<?php
require('../../class/html2pdf/html2pdf.class.php');
require('../../lib/db.inc.php');
require('../../lib/global.php');
	$kopf = '
		<table>
			<tr>
				<th width="250px">Datum</th>
				<th>Betrag</th>
				<th>Verwendungszweck</th>
				<th>Quittung</th>
				<th>Buchende Person</th>
				<th align="right">Kassenstand</th>
			</tr>';
			
	$mitte = '';
    $kasse = 0;
    $ausgaben = 0;
    $einnahmen = 0;
		$bu = db_query("SELECT * FROM buchung_haushalt WHERE datum <= '". $_GET['bis'] ."' AND datum >= '". $_GET['von'] ."' ORDER BY datum ASC");
            while($buch = mysqli_fetch_array($bu)){
                $bucher = mysqli_fetch_array(db_query("SELECT vorname,nachname FROM users WHERE id = '". $buch['uid'] ."' "));
				$buch['betrag'] = str_replace(",",".", $buch['betrag']);
                if($buch['betrag'] < 0){ 
                    $color = "red";
                    $kasse = $kasse+($buch['betrag']);
                    $ausgaben = $ausgaben+($buch['betrag']);
                }else{
                    $color = "black";
                    $kasse = $kasse+$buch['betrag'];
                    $einnahmen = $einnahmen+$buch['betrag'];
                }
            	$mitte .= '
            		<tr>
                    	<td>'. date("d.m.Y", $buch['datum']) .'</td>
            			<td align="right"><font color="'.$color.'">'. number_format($buch['betrag'],2,',','.') .' &euro;</font></td>
            			<td>'. $buch['verwendungszweck'] .'</td>
            			<td>'. $buch['quittung'] .'&nbsp;&nbsp;&nbsp;</td>
            			<td>'. $bucher['vorname'] .','.$bucher['nachname'] .'</td>
                        <td align="right">'. number_format($kasse,2,',','.') .' &euro;</td>
            		</tr>
            	';
            }
	$fuss = '</table>';
	
	$erg = '
        <page>
            <page_header>
                
			</page_header>
            <page_footer>
            
            </page_footer>
            <div style="width: 732px;">
                <div style="background-color: #4C620D;">
                        <div style="float: left; font-size: 15px; width: 400px;">
                            Kassenbuch: <u>'. date("m-Y", $_GET['bis']).'</u><br>
                            Aktueller Kassenbestand: '. number_format($kasse,2,',','.') .' &euro;<br><br>
                            <table style="width: 400px">
                                <tr>
                                    <td>Ausgaben</td>
                                    <td>Einnahmen</td>
                                    <td>&Uuml;berschuss</td>
                                </tr>
                                <tr>
                                    <td>'. number_format($ausgaben*1,2,',','.') .' &euro;</td>
                                    <td>'. number_format($einnahmen,2,',','.') .' &euro;</td>
                                    <td>'. number_format($einnahnem-$ausgaben,2,',','.') .' &euro;</td>
                                </tr>
                            </table>
                        </div>
                        <div style="margin-left: 620px;">
                            <img src="../../images/logo.png">
                        </div>
                </div>
                <div style=" height: 10px;"></div>
                <div style="text-align: right;">
		            '.$kopf.$mitte.$fuss.'
                </div>
            </div>
        </page>';
		
	$oben=10;    //mT
	$unten=10;   //mB
	$links=10;   //mL
	$rechts=10;  //mR
    $html2pdf = new HTML2PDF('P','A4','de', true, 'UTF-8', array($links, $oben, $rechts, $unten)); 
    $html2pdf->WriteHTML($erg);
    $html2pdf->Output( 'example.pdf' );
?>

sobald ich nun das ganze als PDF ausgebe wird mir alles sehr verschoben angezeigt wie im bild zu sehen: Bildbeschreibung Es wird oben nicht alles auf einer linie angezeigt, sondern das logo sitzt leider weiter unten.

kann mir hier vielleicht jemand weiter helfen?

Danke schonmal für die Tips

  1. sobald ich nun das ganze als PDF ausgebe wird mir alles sehr verschoben angezeigt wie im bild zu sehen:

    ...

    Es wird oben nicht alles auf einer linie angezeigt, sondern das logo sitzt leider weiter unten.

    Das liegt vermutlich mit daran, dass HTML2PDF eine grauenhafte Rendering-Engine hat. Verlässlicher sind Bibliotheken, die unter der Haube einen der etablierten Browser benutzen um die visuelle Ausgabe zu erzeugen.

  2. Hej Eric,

    wann immer möglich würde ich ein Druck-CSS einem PDF vorziehen.

    Muss es denn ein PDF sein?

    Marc

    1. Hallo marctrix,

      wann immer möglich würde ich ein Druck-CSS einem PDF vorziehen.

      Das mag für dich gelten, aber bei weitem noch nicht für alle. Ich z.B. ziehe ein PDF vor: die Druck-Ausgabe ist deutlich besser als dieser schmarrn, den Browser fabrizieren. Ausserdem kann ich das dann in mein Dokumenten-Archiv packen.

      LG,
      CK

      1. Hej Christian,

        wann immer möglich würde ich ein Druck-CSS einem PDF vorziehen.

        Das mag für dich gelten,

        Richtig ;-)

        aber bei weitem noch nicht für alle.

        Was heißt das? Statistiken? A/B-Tests? Was wollen die Nutzer?

        Ich z.B. ziehe ein PDF vor:

        Ich mache mir PDFs selber, wenn ich die brauche (allerdings brauche ich die nie von Webseiten - ist aber freilich schon wieder eine persönliche Geschichte).

        die Druck-Ausgabe ist deutlich besser als dieser schmarrn, den Browser fabrizieren.

        Der Ausdruck einer Website ist für mich eine absolute Ausnahme und Notlösung. In der Regel Speicher ich mit Lesezeichen oder auch male eine Webseite ab (extrem selten).

        Aber für ein Projekt, in dem das Layout eines Druckerzeugnisses auf die Webseite übertragen werden sollte und ausgedruckt dann wieder dem ursprünglichen Druckerzeugnis möglichst ähnlich sein musste, habe ich mal viel Zeit in die Druckfassung investiert. Der Kunde war zufrieden (ziemlich altes Projekt, also mäkelt nicht allzusehr an der Umsetzung rum, heute könnte man vieles anders machen...)

        Ausserdem kann ich das dann in mein Dokumenten-Archiv packen.

        Wie gesagt: PDFs erstelle ich mir selber - habe z. B. nie begriffen, warum Joomla standardmäßig die Generierung von PDFs anbietet.

        Als ich das zum ersten Mal gesehen habe, fand ich das super cool - als ich auch Jahre nachdem ich Joomla zum ersten Mal verwendet hatte, die Funktion zum Generieren der PDFs nicht ein einziges Mal benutzt hatte, kamen mir erste Zweifel an deren Sinn.

        Aber es mag Projekte geben, bei denen das Sinn macht. Oder Kunden, die das unbedingt wollen, selbst dann, wenn die Nutzer Ihrer Seiten die Funktion nicht verwenden...

        Offenbar ist es hier nötig...

        Marc

        1. Hallo marctrix,

          aber bei weitem noch nicht für alle.

          Was heißt das? Statistiken? A/B-Tests? Was wollen die Nutzer?

          Was „die Nutzer” wollen ist völlig indifferent. Das hängt stark von Zielgruppe, Kenntnisstand und weiteren Faktoren ab. Anekdotisch kann ich berichten, dass User aus dem Business-Umfeld lieber PDFs haben wollen.

          Ich z.B. ziehe ein PDF vor:

          Ich mache mir PDFs selber, wenn ich die brauche (allerdings brauche ich die nie von Webseiten - ist aber freilich schon wieder eine persönliche Geschichte).

          Ich mache sie mir selbst, wenn es der Dienst nicht anders anbietet.

          die Druck-Ausgabe ist deutlich besser als dieser schmarrn, den Browser fabrizieren.

          Der Ausdruck einer Website ist für mich eine absolute Ausnahme und Notlösung.

          Wenn du dir deine PDFs selber baust, gehe ich davon aus, dass du die „print to PDF”-Funktion von OS X meinst (ich weiss ja, dass du OSX-User bist). Die nutzt ja die Print-Ausgabe, die die Browser fabrizieren, und oft ist das völlig kaputt. Z.B. bescheuerte Adress-Angaben im Header, kaputte Skalierung, usw.

          In der Regel Speicher ich mit Lesezeichen […]

          Ich rede hier nicht von normalen Webseiten, sondern von Berichten oder Tickets oder sowas.

          […] oder auch male eine Webseite ab (extrem selten).

          Das mache ich nie, weil das chronisch kaputt ist…

          LG,
          CK

          1. Hej Christian,

            Wenn du dir deine PDFs selber baust, gehe ich davon aus, dass du die „print to PDF”-Funktion von OS X meinst (ich weiss ja, dass du OSX-User bist). Die nutzt ja die Print-Ausgabe, die die Browser fabrizieren, und oft ist das völlig kaputt. Z.B. bescheuerte Adress-Angaben im Header, kaputte Skalierung, usw.

            wenn ich eine Druckausgabe machen muss, gebe ich nur den Artikel aus; Menü, Header, Footer usw setze ich alles auf display: none

            In der Regel bleibt dann Fließtext mit Bildern. Ist eigentlich keine Herausforderung, das lesbar auf ein Blatt Papier zu bringen...

            Deine schlechten Erfahrungen rühren wohl daher, dass viele Webseiten-Betreiber druck-Styles stiefmütterlich behandeln. Mich eingeschlossen!

            Wenn man das ordentlich macht, ist das Ergebnis auch ok.

            Marc

  3. hallo,

    danke erstmal für eure Hilfe und hinweiße. habe das ganze jetzt folgendermaßen erledigt:

    <?php
    $mitte = '
    	<table cellspacing="0" style="width: 100%; text-align: center; font-size: 14px; background-color: #4C620D " >
            <tr>
                <td style="width: 75%;">
    				Kassenbuch: <u>'. date("m-Y", $_GET['bis']).'</u><br>
                    Aktueller Kassenbestand: '. number_format($kasse,2,',','.') .' &euro;<br><br>
                        <table>
                            <tr>
                                <td>Ausgaben</td>
                                <td>Einnahmen</td>
    							<td>&Uuml;berschuss</td>
                            </tr>
                            <tr>
                                <td>'. number_format($ausgaben*1,2,',','.') .' &euro;</td>
                                <td>'. number_format($einnahmen,2,',','.') .' &euro;</td>
                                <td>'. number_format($einnahnem.$ausgaben,2,',','.') .' &euro;</td>
                            </tr>
                        </table>
                </td>
                <td style="width: 25%; color: #444444;">
                    <img style= src="../../images/logo.png" alt="Logo"><br>
                </td>
            </tr>
        </table>
    ';
    ?>
    

    Somit ist alles bestens dargestellt :-) werde aber trotzdem mal noch schauen, ob ich nicht doch noch umstellen werde auf eine andere bibliothek.

    1. Hallo,

      danke erstmal für eure Hilfe und hinweiße.

      von mir auch noch ein Hinblau:

                              <td>'. number_format($einnahnem.$ausgaben,2,',','.') .' &euro;</td>
      

      Hier meinst du vermutlich nicht $einnahnem, sondern $einnahmen. Aber warum du da Einnahmen und Ausgaben als String verkettest, blau ich nicht.

      Gruß
      Kalk

      PS: ich wollte es nicht als Hinrot schreiben, weil es wahrscheinlich nur ein Copy&Paste-Fehler ist

      1.                         <td>'. number_format($einnahnem.$ausgaben,2,',','.') .' &euro;</td>
        

        Das ist das Ergebniss von den Einnahmen-Ausgaben. Da die Ausgaben ein Minusbetrag sind brauche ich keine rechnung noch anstellen. da reicht diese kurze verkettung vollkommen zu. :-)