Hallo,
für ein Projekt muss ich derzeit ein paar PDF Dateien erzeugen. Da das selber "malen" sehr aufwendig ist war ich über folgendes Tutorial sehr erfreut: github.com/appcoda/Print2PDF
Hier erstellt man einfach eine HTML-Seite und aus dieser wird mittels verschiedener Apple Methoden eine PDF erzeugt. Funktioniert auch echt klasse bis auf ein Problem.
Wenn eine Pdf über mehrere Seiten geht tritt das Phänomen, wie im Bild zu sehen, auf. Ich habe bereits alles versucht. Dem gesagt, dass er den Page-Break innerhalb eines TR vermeiden soll, extra ein neues DIV eingeführt und da noch mal gesagt, dass da explizit kein PageBreak sein soll aber immer ohne Erfolg. Was kann ich noch machen? Ich bin am verzweifeln
Mein Ziel ist es, dass der Text auch auf die neue Seite kommt. Direkt neben das Bild.
Hier mein Code:
Alles anzeigen
Viele Grüße und Danke
Nils
für ein Projekt muss ich derzeit ein paar PDF Dateien erzeugen. Da das selber "malen" sehr aufwendig ist war ich über folgendes Tutorial sehr erfreut: github.com/appcoda/Print2PDF
Hier erstellt man einfach eine HTML-Seite und aus dieser wird mittels verschiedener Apple Methoden eine PDF erzeugt. Funktioniert auch echt klasse bis auf ein Problem.
Wenn eine Pdf über mehrere Seiten geht tritt das Phänomen, wie im Bild zu sehen, auf. Ich habe bereits alles versucht. Dem gesagt, dass er den Page-Break innerhalb eines TR vermeiden soll, extra ein neues DIV eingeführt und da noch mal gesagt, dass da explizit kein PageBreak sein soll aber immer ohne Erfolg. Was kann ich noch machen? Ich bin am verzweifeln
Mein Ziel ist es, dass der Text auch auf die neue Seite kommt. Direkt neben das Bild.
Hier mein Code:
HTML-Quellcode: main.html
- <!DOCTYPE html>
- <html>
- <head>
- <meta content="text/html; charset=utf-8" http-equiv="content-type">
- <title>PDF</title>
- <style type="text/css">
- .report-box,
- .imageTable {
- max-width:800px;
- margin:auto;
- padding:30px;
- /*border:1px solid #eee;*/
- /*box-shadow:0 0 10px rgba(0, 0, 0, .15); */
- font-size:16px;
- line-height:24px;
- font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
- color:#555;
- }
- .report-box table{
- width:100%;
- line-height:inherit;
- text-align:left;
- }
- .report-box table td,
- .imageTable table td {
- padding:5px;
- vertical-align:top;
- }
- .report-box table tr td:nth-child(2){
- text-align:right;
- }
- .report-box table tr.top table td{
- padding-bottom:20px;
- }
- .report-box table tr.top table td.title{
- font-size:45px;
- line-height:45px;
- color:#333;
- }
- .report-box table tr.information table td{
- padding-bottom:40px;
- }
- .report-box table tr.heading td,
- .imageTable table tr.heading td{
- background:#eee;
- border-bottom:1px solid #ddd;
- font-weight:bold;
- }
- .report-box table tr.details td{
- padding-bottom:20px;
- }
- .imageTable table tr.item td{
- border-bottom:1px solid #eee;
- }
- .imageTable table tr.item.last td{
- border-bottom:none;
- }
- .imageTable table, .imageTable tr, .imageTable td, .imageTable th {
- page-break-inside: avoid;
- }
- .imageTable tr.item {
- page-break-before: auto;
- }
- @media only screen and (max-width: 600px) {
- .report-box table tr.top table td{
- width:100%;
- display:block;
- text-align:center;
- }
- .report-box table tr.information table td{
- width:100%;
- display:block;
- text-align:center;
- }
- }
- </style>
- </head>
- <body>
- <div class="report-box">
- <table cellpadding="0" cellspacing="0">
- <tbody>
- <tr class="top">
- <td colspan="2">
- <table>
- <tbody>
- <tr>
- <td class="title"> <img src="#LOGO_IMAGE#" style="width:100%; max-width:200px; background-color: #cdcdcd">
- </td>
- <td> <b>PDF zu_</b> #PDF_NUMBER#<br>
- #PDF_DATE#</td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- <tr class="information">
- <td colspan="2">
- <table>
- <tbody>
- <tr>
- <td> #SENDER_INFO# </td>
- <td> #RECIPIENT_INFO# </td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- <tr class="heading">
- <td> #HEADING# </td>
- <td> <br>
- </td>
- </tr>
- <tr class="details">
- <td>Mitarbeiter: #EMPLOYEES# </td>
- <td> <br>
- </td>
- </tr>
- </table>
- </div>
- <div class="imageTable">
- <table cellpadding="0" cellspacing="0">
- <tr class="heading">
- <td style="width:50%"> Bild </td>
- <td> Beschreibung </td>
- </tr>
- #ITEMS#
- </tbody>
- </table>
- </div>
- </body>
- </html>
Viele Grüße und Danke
Nils