Gunakan wkhtmltopdf untuk menukar laporan jadual html:
<!DOCTYPE html> <html lang="en"></html> <head> <style type="text/css"> @font-face { font-family: Plex; src: url(/home/shawn/Development/Websites/MDSova/restapi/templates/fonts/IBMPlexSans-Regular.ttf); } @font-face { font-family: Plex-Bold; src: url(/home/shawn/Development/Websites/MDSova/restapi/templates/fonts/IBMPlexSans-SemiBold.ttf); } body { font-family: Plex, Arial, Helvetica, sans-serif; background-color: #FFF; font-size: 18px; } h1, h2, h3 { margin: 0; padding: 0; } .report-data-table, .report-title-table { width: 100%; border-collapse: collapse; } .report-title-table { line-height: 36px; } .report-title-left, .title-right { width: 15%; } .report-title-center { width: 70%; text-align: center; } .report-title-right { text-align: right; } .report-date-header, .report-date-col { width: 10%; background-color: chocolate; } .report-for-header, .report-for-col { width: 14%; background-color: palegreen } .test { width: 78%; background-color: forestgreen; } .report-date-header, .report-for-header, .report-source-header, .report-sourcename-header, .report-account-header, .report-method-header, .report-reference-header, .report-amount-header { font-family: Plex-Bold; border-bottom: 1px solid #333; } </style> </head> <body> <table class="report-title-table"> <tr> <td class="report-title-left">01/15/2023</td> <td class="report-title-center"> <h1>Payment Ledger</h1> </td> <td class="report-title-right">11:23AM</td> </tr> </table> <table class="report-data-table"> <tr> <td class="report-date-header">Payment Date</td> <td class="report-for-header">Payment For</td> <td class="test"></td> </tr> <tr class="column-row"> <td class="report-date-col">01/23/2023</td> <td class="report-for-col">PAYMENT ON ACCOUNT</td> <td class="test"></td> </tr> <tr class="column-row"> <td class="report-date-col">01/23/2023</td> <td class="report-for-col">PAYMENT ON ACCOUNT</td> <td class="test"></td> </tr> <tr class="column-row"> <td class="report-date-col">01/23/2023</td> <td class="report-for-col">PAYMENT ON ACCOUNT</td> <td class="test"></td> </tr> <tr class="column-row"> <td class="report-date-col">01/23/2023</td> <td class="report-for-col">PAYMENT ON ACCOUNT</td> <td class="test"></td> </tr> <tr class="column-row"> <td class="report-date-col">01/23/2023</td> <td class="report-for-col">PAYMENT ON ACCOUNT</td> <td class="test"></td> </tr> <tr class="column-row"> <td class="report-date-col">01/23/2023</td> <td class="report-for-col">PAYMENT ON ACCOUNT</td> <td class="test"></td> </tr> <tr class="column-row"> <td class="report-date-col">01/23/2023</td> <td class="report-for-col">PAYMENT ON ACCOUNT</td> <td class="test"></td> </tr> <tr class="column-row"> <td class="report-date-col">01/23/2023</td> <td class="report-for-col">PAYMENT ON ACCOUNT</td> <td class="test"></td> </tr> <tr class="column-row"> <td class="report-date-col">01/23/2023</td> <td class="report-for-col">PAYMENT ON ACCOUNT</td> <td class="test"></td> </tr> <tr class="column-row"> <td class="report-date-col">01/23/2023</td> <td class="report-for-col">PAYMENT ON ACCOUNT</td> <td class="test"></td> </tr> <tr class="column-row"> <td class="report-date-col">01/23/2023</td> <td class="report-for-col">PAYMENT ON ACCOUNT</td> <td class="test"></td> </tr> <tr class="column-row"> <td class="report-date-col">01/23/2023</td> <td class="report-for-col">PAYMENT ON ACCOUNT</td> <td class="test"></td> </tr> <tr class="column-row"> <td class="report-date-col">01/23/2023</td> <td class="report-for-col">PAYMENT ON ACCOUNT</td> <td class="test"></td> </tr> <tr class="column-row"> <td class="report-date-col">01/23/2023</td> <td class="report-for-col">PAYMENT ON ACCOUNT</td> <td class="test"></td> </tr> <tr class="column-row"> <td class="report-date-col">01/23/2023</td> <td class="report-for-col">PAYMENT ON ACCOUNT</td> <td class="test"></td> </tr> </table> </body>
Saya tahu terdapat banyak kod di sini, tetapi terdapat beberapa baris yang tidak sejajar. Ia bukan hanya pada satu baris sama ada - ia secara rawak. Apabila html dimasukkan ke dalam penyemak imbas ia dipaparkan dengan baik, tetapi ia tidak ditukar kepada versi cetakan. Apakah yang boleh saya lakukan untuk membetulkan masalah ini? Terima kasih
Saya boleh mengeluarkan semula isu itu selepas menambah lebih banyak baris, yang menunjukkan bahawa isu itu sememangnya tidak dapat diramalkan.
Namun, isu itu nampaknya disebabkan oleh
border-collapse:collapse;
sifat css. Mengalih keluarnya menjadikan semua baris ketinggian yang sama.Sudah tentu, ini juga akan menghasilkan sempadan putih di sekeliling setiap sel jadual, yang mungkin tidak diingini.
Untuk menjadikan sempadan sebati dengan sel, penyelesaiannya ialah mewarnakan lajur menggunakan corak latar belakang keseluruhan jadual (bukannya atribut
background-color
sel individu).Dalam kod di bawah, saya mencipta imej svg sebaris yang terdiri daripada tiga segi empat tepat dengan lebar dan warna lajur jadual:
Untuk mengira lebar lajur dengan betul semasa penukaran, saya perlu melaraskan tetapan dpi kepada 130:
Kod HTML:
Payment Ledger
Fail pdf yang dihasilkan: