Rendering issue #11
Comments
|
Hi, |
|
Hey @lucas-gaitzsch here you go curl --location 'http://localhost:8000/api/pdf/from/html-template/render' \
--header 'Content-Type: application/json' \
--data-raw '{
"footerHtmlTemplate": "",
"headerHtmlTemplate": "",
"htmlTemplate": "<!DOCTYPE html>\n<html lang=\"en\" xmlns:v=\"urn:schemas-microsoft-com:vml\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"x-apple-disable-message-reformatting\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <meta name=\"format-detection\" content=\"telephone=no, date=no, address=no, email=no, url=no\">\n <meta name=\"color-scheme\" content=\"light dark\">\n <meta name=\"supported-color-schemes\" content=\"light dark\">\n <!--[if mso]>\n <noscript>\n <xml>\n <o:OfficeDocumentSettings xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n <o:PixelsPerInch>96</o:PixelsPerInch>\n </o:OfficeDocumentSettings>\n </xml>\n </noscript>\n <style>\n td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: \"Segoe UI\", sans-serif; mso-line-height-rule: exactly;}\n </style>\n <![endif]-->\n <title>Invoice 1</title>\n <style>\n .border-gray-200 {\n --tw-border-opacity: 1;\n border-color: rgb(229 231 235 / var(--tw-border-opacity))\n }\n .border-gray-300 {\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity))\n }\n .bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity))\n }\n .bg-gray-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(209 213 219 / var(--tw-bg-opacity))\n }\n .bg-gray-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(156 163 175 / var(--tw-bg-opacity))\n }\n .bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity))\n }\n .bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n }\n .text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity))\n }\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n }\n @keyframes enter {\n from {\n opacity: var(--tw-enter-opacity, 1) !important;\n transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)) !important\n }\n }\n @keyframes exit {\n to {\n opacity: var(--tw-exit-opacity, 1) !important;\n transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)) !important\n }\n }\n </style>\n</head>\n<body class=\"bg-slate-50\" style=\"margin: 0px; width: 100%; background-color: rgb(248 250 252 / 1); padding: 0px; -webkit-font-smoothing: antialiased; word-break: break-word\">\n <div style=\"display: none\">\n Template 1\n </div>\n <div role=\"article\" aria-roledescription=\"email\" aria-label=\"Invoice 1\" lang=\"en\">\n <div class=\"bg-gray-100\" style=\"display: flex; height: 100%; width: 100%; align-items: center; justify-content: center; background-color: rgb(243 244 246 / 1)\">\n <div class=\"bg-white border-gray-300 shadow-lg\" style=\"height: 1200px; width: 800px; border-width: 1px; border-color: rgb(209 213 219 / 1); background-color: rgb(255 255 255 / 1); box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow)\">\n <div class=\"bg-white border-gray-200\" style=\"border-radius: var(--radius); border-width: 1px; border-color: rgb(229 231 235 / 1); background-color: rgb(255 255 255 / 1); padding: 1.5rem\">\n <pdfheader>\n <div style=\"margin-bottom: 1rem; margin-top: 0px; text-align: center\">\n <div style=\"font-size: 0.75rem; line-height: 1rem\">{{invoice.header}}</div>\n </div>\n </pdfheader>\n <div style=\"display: flex; align-items: center; justify-content: space-between\">\n <img src=\"{{company.logo}}\" alt=\"Innvoicify\" width=\"100\" height=\"100\" style=\"max-width: 100%; vertical-align: middle; border-radius: 9999px\">\n <div style=\"margin-bottom: 0.5rem; display: flex; flex-direction: column; align-items: flex-end; text-align: center\">\n <div class=\"bg-gray-300\" style=\"width: 300px; background-color: rgb(209 213 219 / 1); padding: 0.5rem; text-align: center; font-size: 1.25rem; line-height: 1.75rem\">{{invoice.type}}</div>\n <p>Ref.: {{invoice.ref}}</p>\n <p>Version: {{invoice.version}}</p>\n <p>Date: {{invoice.date}}</p>\n </div>\n </div>\n <div style=\"display: flex; align-items: center; justify-content: space-between;\">\n <div>\n <div class=\"bg-gray-300\" style=\"margin-bottom: 0.5rem; width: 300px; background-color: rgb(209 213 219 / 1); padding: 0.5rem 1.25rem 0.5rem 0.5rem; text-align: left; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700\">{{company.name}}</div>\n <div class=\"bg-gray-300\" style=\"background-color: rgb(209 213 219 / 1); padding-left: 0.5rem; padding-top: 0.5rem\">{{company.address1}}</div>\n <div class=\"bg-gray-300\" style=\"background-color: rgb(209 213 219 / 1); padding-left: 0.5rem\">{{company.address2}}</div>\n <div class=\"bg-gray-300\" style=\"background-color: rgb(209 213 219 / 1); padding-left: 0.5rem; padding-top: 0.5rem\">{{company.city}}, {{company.state}}</div>\n <div class=\"bg-gray-300\" style=\"background-color: rgb(209 213 219 / 1); padding-bottom: 0.5rem; padding-left: 0.5rem\">{{company.phone}}</div>\n </div>\n <div style=\"margin-bottom: 1.5rem; display: flex\">\n <div style=\"margin-bottom: 0.5rem; display: flex; flex-direction: column; align-items: flex-end; text-align: left;\">\n <div class=\"bg-gray-300\" style=\"margin-bottom: 0.5rem; width: 300px; background-color: rgb(209 213 219 / 1); padding: 0.5rem; text-align: left; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700\">{{customer.name}}</div>\n <div class=\"bg-gray-300\" style=\"width: 100%; background-color: rgb(209 213 219 / 1); padding-left: 0.5rem; padding-top: 0.5rem\">{{customer.address1}}</div>\n <div class=\"bg-gray-300\" style=\"width: 100%; background-color: rgb(209 213 219 / 1); padding-left: 0.5rem; padding-top: 0.5rem\">{{customer.address2}}</div>\n <div class=\"bg-gray-300\" style=\"width: 100%; background-color: rgb(209 213 219 / 1); padding-left: 0.5rem; padding-top: 0.5rem\">{{customer.city}}, {{customer.state}}</div>\n </div>\n </div>\n </div>\n <div style=\"margin-top: 1rem; margin-bottom: 1rem; display: flex; justify-content: space-between\">\n {{invoice.description}}\n </div>\n <hr style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n <table style=\"width: 100%;\" cellpadding=\"0\" cellspacing=\"0\" role=\"none\">\n <thead class=\"bg-gray-300 text-black\" style=\"background-color: rgb(209 213 219 / 1); font-weight: 700; color: rgb(0 0 0 / 1)\">\n <tr>\n <th class=\"text-black\" style=\"font-weight: 700; color: rgb(0 0 0 / 1)\">Name</th>\n <th class=\"text-black\" style=\"font-weight: 700; color: rgb(0 0 0 / 1)\">Unit price</th>\n <th class=\"text-black\" style=\"font-weight: 700; color: rgb(0 0 0 / 1)\">Qty</th>\n <th class=\"text-black\" style=\"font-weight: 700; color: rgb(0 0 0 / 1)\">Total no tax</th>\n <th class=\"text-black\" style=\"font-weight: 700; color: rgb(0 0 0 / 1)\">Discount</th>\n <th class=\"text-black\" style=\"font-weight: 700; color: rgb(0 0 0 / 1)\">Tax</th>\n <th class=\"text-black\" style=\"font-weight: 700; color: rgb(0 0 0 / 1)\">Total</th>\n </tr>\n </thead>\n <tbody> {{#each items}}\n <tr>\n <td>\n <div style=\"display: flex; flex-direction: column; justify-content: flex-start; padding-top: 0.5rem\">\n <div style=\"font-weight: 700;\">{{name}}</div>\n <div style=\"font-size: 0.875rem; line-height: 1.25rem\">{{description}}</div>\n </div>\n </td>\n <td>{{invoice.currency}}{{unit_price}}</td>\n <td>{{qty}}</td>\n <td>{{total_no_tax}}</td>\n <td>{{discount}}</td>\n <td>{{tax}}</td>\n <td>{{invoice.currency}}{{total}}</td>\n </tr>\n {{/each}}\n </tbody>\n </table>\n <hr style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n <div style=\"margin-top: 1rem; display: flex; justify-content: flex-end\">\n <div class=\"bg-gray-400\" style=\"background-color: rgb(156 163 175 / 1); padding: 1.5rem; text-align: right\">\n <div>TOTAL</div>\n <div>TOTAL DISCOUNTED:</div>\n <div>TAX:</div>\n <div>TOTAL WITH TAX:</div>\n </div>\n <div class=\"bg-gray-300\" style=\"background-color: rgb(209 213 219 / 1); padding: 1.5rem\">\n <div>{{invoice.currency}}{{invoice.total}}</div>\n <div>{{invoice.currency}}{{invoice.discount}}</div>\n <div>{{invoice.currency}}{{invoice.tax}}</div>\n <div>{{invoice.currency}}{{invoice.total_with_tax}}</div>\n </div>\n </div>\n <div style=\"margin-top: 1rem; text-align: right;\">\n Payment term: {{invoice.payment_term}}\n </div>\n <pdffooter>\n <div style=\"margin-bottom: 1rem; margin-top: 0px; text-align: center;\">\n <div style=\"font-size: 0.75rem; line-height: 1rem;\">{{invoice.thank_you}}</div>\n </div>\n </pdffooter>\n </div>\n </div>\n </div>\n </div>\n</body>\n</html>\n",
"model": {
"invoice": {
"type": "Invoice",
"ref": "123456",
"version": "1.0",
"date": "2024-06-22",
"header": "Invoice Header",
"description": "Invoice for services rendered",
"currency": "$",
"total": "350.00",
"discount": "0.00",
"tax": "35.00",
"total_with_tax": "385.00",
"payment_term": "Net 30 days",
"thank_you": "Thank you for your business!"
},
"customer": {
"name": "John Doe",
"address1": "456 Elm Street",
"address2": "Apt 789",
"city": "Gotham",
"state": "USA",
"phone": "123-456-7890"
},
"company": {
"name": "Innvoicify",
"address1": "123 Main Street",
"address2": "Suite 400",
"city": "Singapore",
"country": "Singapore"
},
"items": [
{
"name": "Service A",
"description": "Description of Service A",
"unit_price": "100.00",
"qty": "2",
"total_no_tax": "200.00",
"discount": "0.00",
"tax": "20.00",
"total": "220.00"
},
{
"name": "Service B",
"description": "Description of Service B",
"unit_price": "150.00",
"qty": "1",
"total_no_tax": "150.00",
"discount": "0.00",
"tax": "15.00",
"total": "165.00"
}
]
},
"options": {
"excludeBuiltinStyles": false,
"landscape": false,
"margins": {
"bottom": 40,
"left": 4,
"right": 4,
"top": 4
},
"pageFormat": "A4",
"pageSize": {
"height": 297,
"width": 210
}
},
"templateEngine": "handlebars"
}' |
|
Hello @lucas-gaitzsch, could you let me know if you need more information about the problem? |
|
Yes, i will let you know. I will analyze it in about 2.5 weeks. Currently i am on vacation. |
|
@ketanmujumdar It works if I remove the heights from your div containers:
You can load this bundle in https://pdfturtle.gaitzsch.dev/ |
|
oh so stupid of me, thank you so much :) |
|
You are welcome. Have a nice day. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
First of all thanks, amazing work and it works really great. However, I am trying to generate PDF invoices for my company and somehow it always creates 2 pages even if its does not need. I tried going through the code but could not find the solution. Please find the screenshot
Appreciate your help.
options.json
{
"landscape": false,
"pageFormat": "A4",
"margins": {
"top": 4,
"right": 4,
"bottom": 4,
"left": 4
}
}
The text was updated successfully, but these errors were encountered: