WKHTMLTOPDF schneidet Text vom linken Rand ab

Question

Ich verwende WKHTMLTOPDF, um PDFs durch meine Laravel-Anwendung zu erzeugen. Die PDF-Vorlage verwendet Bootstrap 3.3.6.

Was ich gerade sehe ist, dass der Text, die Schrift, das Layout perfekt gerendert wird, aber der Text vom linken Rand abgeschnitten wird.

Wenn ich den Aufruf für das Bootstrap CSS entfernen, wird der Text nicht abgeschnitten, aber die Tabellen usw. sind nicht richtig ausgerichtet. Es muss etwas in Bootstrap sein, das dieses Problem verursacht.

Top of template

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'> 
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

<style> 
body { 
    width: auto !important; min-width: 100% !important; 
    font-family: 'Lato'; 
} 
.page-break { 
    page-break-after: always; 
} 
</style> 

Die Linie width: auto !important; min-width: 100% !important; macht mehr aus dem Text zu sehen, aber es ist immer noch nicht perfekt (Abbildung unten auf der zweiten Seite):

Jeder Text, der in <p> </p> verpackt ist, passt auf die PDF korrekt, aber die Kopfzeilen und Tabellen usw. sind auf der linken Seite abgeschnitten.

Controller-Code:

$pdf = PDF::loadView('reports.view-full-audit-report', $data) 
->setPaper('a4') 
->setOrientation('portrait') 
->setOption('encoding', 'utf-8'); 
return $pdf->download('auditReport.pdf'); 

Hat jemand zuvor erlebt? Wenn ja, wie haben Sie es gelöst? Wenn Sie weitere Codebeispiele benötigen, lassen Sie es mich wissen. Danke vielmals.

Answer 1

Ich habe das schon früher erlebt, auf Frappé Framweork und ERPNext. Das HTML-Rendering für einen DocType (Sales Invoice) wird dies aus mysteriösen Gründen tun. Bis jetzt habe ich zwei Problemumgehungen gefunden: 1. Legen Sie die Ansichtsfenstergröße im HTML-Code entsprechend Ihrer endgültigen Dokumentgröße fest. Zum Beispiel kann eine 8,5 x 11 Letter-Format Seite wäre:

<style> 
@media screen { 
    .print-format { 
     width: 21.59cm; 
     min-height: 27.94cm; 
     padding: 0.0cm; 
    } 
} 
</style> 

Ich glaube, Sie auch Zoll oder andere anerkannte Messungen verwenden können. Sie müssen eine angemessene Darstellungsgröße auf der HTML oder Jinja Vorlage durch die obige Lösung tun

1. erklären Wenn alles andere fehlschlägt, ich mein Problem alternativ mit den folgenden Arten und HTML gelöst:

   <style> 
       div.general{ 
        position: relative; 
        top: 0.0cm; 
        /*left: 0.0cm; */ 
       } 
       div.document_size{ 
        position: absolute; 
        width: 21.59cm; 
        height: 27.94cm; 
       } 
   </style> 
   <div class="general"> 
       <div class="document_size"> 
        <!-- YOUR HTML GOES HERE --> 
       </div> 
   </div> 
   

2. Schließlich sorgfältig Ihre Elemente auf der Seite zu positionieren, verwenden Sie den span-Tag, mit einem deklarierten Klasse Stil, so dass Sie es in absoluten Zahlen innerhalb die divs oben erstellt platzieren können. Die Abstände werden von oben links (Ursprung) des Dokuments gemessen:

   span.item1 { Position: absolut; oben: 1 cm; links: 1 cm; }

Sobald Sie die span class = "item1" innerhalb der oben div Tags platziert haben, können Sie alles, was Sie in ihnen wollen platzieren.Ich betrachte diese Span-Tags als eine Art Koordinatensystem-Markierung, die eine konsistente Ausgabe bei jeder Generation von wkhtmltopdf gewährleistet.