i design my pdf and when i add it in templet the format is different
- first that my design using normal html
- the problem when i use qweb template
- first qweb-html
bg-color not the same also the table not have bg-color also the row behave differently - i can't even print this page
- second qweb-pdf
not formatted also
- i searched and i found to add report.url = localhost:portName and did't work
- aslo i expected the css file the same class but it's different
- bootstrap -->
- odoo qweb
- how i handle format if i did't using bootstrap i still have formatted issue
qweb-pdf --> it's the same as normal html
<template id="report_purchase_report">
<t t-foreach="docs" t-as="property">
<t t-call="web.html_container">
<t t-call="web.external_layout">
<div class="page" style="width: 21cm; min-height: 29.7cm;font-size: 14px;">
<style>
table {
font-size: 14px;
}
</style>
<section>
<div class="d-flex justify-content-center mb-3">
<div class="card w-50 shadow">
<div class="card-header text-bg-secondary text-center fw-bold">
Purchase Order
<br/>
(P.O.)
</div>
<div class="card-body d-flex justify-content-around align-items-center">
<div class="fw-bold">PO No.:</div>
<div class="flex-fill text-start">23000874</div>
<div class="fw-bold">Issue Date:</div>
<div class="flex-fill">18-oct-23</div>
</div>
</div>
</div>
</section>
<section>
<div class="card mb-3 shadow">
<div class="card-header text-bg-secondary text-start fw-bold">
Purchase Information
</div>
<div class="card-body">
<table>
<tbody>
<tr>
<td style="width: 3.1cm">Name:</td>
<td class="fw-bold">KCML (Karbala Cement Manufacturing Limited )</td>
</tr>
<tr>
<td>Contact Person:</td>
<td>Mohamed Ali Hamoud Obaiedan Al-tmimi</td>
</tr>
<tr>
<td>Address:</td>
<td class="fw-bold">Karbala Cement Plant , Al-Haj Haighway</td>
</tr>
<tr>
<td>Email:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section>
<div class="card mb-3 shadow">
<div class="card-header text-bg-secondary text-start fw-bold">
Supplier Information
</div>
<div class="card-body d-flex">
<table>
<tbody>
<tr>
<td style="width: 3.1cm">Suppler Name:</td>
<td class="text-uppercase">naffco fzco</td>
</tr>
<tr>
<td>Contact Person:</td>
<td></td>
</tr>
<tr>
<td>Address:</td>
<td>P.O box 262169, Dubai Unted Arab Emirate</td>
</tr>
<tr>
<td>Phone #:</td>
<td></td>
</tr>
<tr>
<td>Email:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section>
<div class="d-flex justify-content-between mb-3">
<div class="card shadow" style="width: 48%">
<div class="card-header text-bg-secondary fw-bold">
Requester Department
</div>
<div class="card-body text-center"></div>
</div>
<div class="card shadow" style="width: 48%">
<div class="card-header text-bg-secondary fw-bold">
Final Approver
</div>
<div class="card-body text-center">Vasilerim Karalia</div>
</div>
</div>
</section>
<section>
<p class="border border-3 rounded-4 border-secondary p-2 mb-3 shadow">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip
</p>
</section>
<section>
<table
class="table shadow align-middle table-bordered table-sm text-center"
style="vertical-align:middle"
>
<thead class="table-secondary">
<tr>
<th>No.</th>
<th>Item Code</th>
<th>Item Description</th>
<th style="width: 1cm">QTY</th>
<th style="width: 1.5cm">UOM</th>
<th style="width: 2.7cm">Delivery Date</th>
<th style="width: 2.1cm">ETA Date</th>
<th style="width: 2cm">Unit Cost</th>
<th style="width: 2.1cm">Total Cost</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>04090100225</td>
<td>
Replacement Of reel 60MTR for firefighting man truck type: TGS
33.360
</td>
<td>10000</td>
<td>EA</td>
<td>31-Aug-23</td>
<td>31-Aug-23</td>
<td>5,000.00</td>
<td>5,000.00</td>
</tr>
<tr>
<th>1</th>
<td>04090100225</td>
<td>
Replacement Of Double pole rocker switch body OFF/ON Momentary
for firefighting man truck type: Tgs 33.360
</td>
<td>1</td>
<td>EA</td>
<td>31-Aug-23</td>
<td></td>
<td>5,000.00</td>
<td>5,000.00</td>
</tr>
<tr>
<th>1</th>
<td>04090100225</td>
<td>
Replacement Of Double pole rocker switch body OFF/ON Momentary
for firefighting man truck type: Tgs 33.360
</td>
<td>1</td>
<td>EA</td>
<td>31-Aug-23</td>
<td></td>
<td>5,000.00</td>
<td>5,000.00</td>
</tr>
<tr>
<th>1</th>
<td>04090100225</td>
<td>
Replacement Of Double pole rocker switch body OFF/ON Momentary
for firefighting man truck type: Tgs 33.360
</td>
<td>1</td>
<td>EA</td>
<td>31-Aug-23</td>
<td></td>
<td>5,000.00</td>
<td>5,000.00</td>
</tr>
</tbody>
<tfoot class="table-secondary">
<tr>
<th class="text-end" colspan="8">Total (USD)</th>
<td>15,055.00</td>
</tr>
</tfoot>
</table>
</section>
<section>
<div class="card mb-3 shadow" style="page-break-before: always;">
<div class="card-header text-bg-secondary text-start fw-bold">
Terms And Conditions
</div>
<div class="card-body">
<table>
<tr>
<td style="width: 4.4cm;">Payment Terms:</td>
<td>100% advance payment</td>
</tr>
<tr>
<td>Delivery Terms:</td>
<td></td>
</tr>
<tr>
<td>Delivery Place:</td>
<td>KCML</td>
</tr>
<tr>
<td>Delivery Duration:</td>
<td>3 three mostla from order confirmation and payment</td>
</tr>
<tr>
<td>Penalty:</td>
<td>
A Delay Penalty of 0.1% from the Po total amount will be applied per
each delay Day/Not Over
than 10%
</td>
</tr>
<tr>
<td>Warranty:</td>
<td></td>
</tr>
<tr>
<td>Conditions:</td>
<td>FE# 20230000824</td>
</tr>
<tr>
<td>Notes and Comments:</td>
<td>Notes and Comments</td>
</tr>
</table>
</div>
</div>
</section>
<section>
<div class="d-flex justify-content-between mb-3">
<div class="card shadow" style="width: 48%">
<div class="card-header fw-bold">
Procurement Representative Signature
</div>
<div class="card-body text-center p-5"></div>
</div>
<div class="card shadow" style="width: 48%">
<div class="card-header fw-bold">
Supplier Representative Signature
</div>
<div class="card-body text-center"></div>
</div>
</div>
</section>
<section>
<div style="font-size: 18px">
<p class="text-uppercase fw-bold">
Purchasing Terms And Conditions
</p>
<p class="fw-bolder">
Application Of Conditions
</p>
</div>
</section>
</div>
</t>
</t>
</t>
</template>
normal html using bootstrap
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7"
crossorigin="anonymous"
/>
<title>Purchase</title>
</head>
<body>
<div class="page" style="width: 21cm; min-height: 29.7cm;font-size: 14px;">
<style>
table {
font-size: 14px;
}
</style>
<section>
<div class="d-flex justify-content-center mb-3">
<div class="card w-50 shadow">
<div class="card-header text-bg-secondary text-center fw-bold">
Purchase Order
<br/>
(P.O.)
</div>
<div class="card-body d-flex justify-content-around align-items-center">
<div class="fw-bold">PO No.:</div>
<div class="flex-fill text-start">23000874</div>
<div class="fw-bold">Issue Date:</div>
<div class="flex-fill">18-oct-23</div>
</div>
</div>
</div>
</section>
<section>
<div class="card mb-3 shadow">
<div class="card-header text-bg-secondary text-start fw-bold">
Purchase Information
</div>
<div class="card-body">
<table>
<tbody>
<tr>
<td style="width: 3.1cm">Name:</td>
<td class="fw-bold">KCML (Karbala Cement Manufacturing Limited )</td>
</tr>
<tr>
<td>Contact Person:</td>
<td>Mohamed Ali Hamoud Obaiedan Al-tmimi</td>
</tr>
<tr>
<td>Address:</td>
<td class="fw-bold">Karbala Cement Plant , Al-Haj Haighway</td>
</tr>
<tr>
<td>Email:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section>
<div class="card mb-3 shadow">
<div class="card-header text-bg-secondary text-start fw-bold">
Supplier Information
</div>
<div class="card-body d-flex">
<table>
<tbody>
<tr>
<td style="width: 3.1cm">Suppler Name:</td>
<td class="text-uppercase">naffco fzco</td>
</tr>
<tr>
<td>Contact Person:</td>
<td></td>
</tr>
<tr>
<td>Address:</td>
<td>P.O box 262169, Dubai Unted Arab Emirate</td>
</tr>
<tr>
<td>Phone #:</td>
<td></td>
</tr>
<tr>
<td>Email:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section>
<div class="d-flex justify-content-between mb-3">
<div class="card shadow" style="width: 48%">
<div class="card-header text-bg-secondary fw-bold">
Requester Department
</div>
<div class="card-body text-center"></div>
</div>
<div class="card shadow" style="width: 48%">
<div class="card-header text-bg-secondary fw-bold">
Final Approver
</div>
<div class="card-body text-center">Vasilerim Karalia</div>
</div>
</div>
</section>
<section>
<p class="border border-3 rounded-4 border-secondary p-2 mb-3 shadow">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip
</p>
</section>
<section>
<table
class="table shadow align-middle table-bordered table-sm text-center text-"
style="font-size: 14px"
>
<thead class="table-secondary">
<tr>
<th>No.</th>
<th>Item Code</th>
<th>Item Description</th>
<th style="width: 1cm">QTY</th>
<th style="width: 1.5cm">UOM</th>
<th style="width: 2.7cm">Delivery Date</th>
<th style="width: 2.1cm">ETA Date</th>
<th style="width: 2cm">Unit Cost</th>
<th style="width: 2.1cm">Total Cost</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>04090100225</td>
<td>
Replacement Of reel 60MTR for firefighting man truck type: TGS
33.360
</td>
<td>10000</td>
<td>EA</td>
<td>31-Aug-23</td>
<td>31-Aug-23</td>
<td>5,000.00</td>
<td>5,000.00</td>
</tr>
<tr>
<th>1</th>
<td>04090100225</td>
<td>
Replacement Of Double pole rocker switch body OFF/ON Momentary
for firefighting man truck type: Tgs 33.360
</td>
<td>1</td>
<td>EA</td>
<td>31-Aug-23</td>
<td></td>
<td>5,000.00</td>
<td>5,000.00</td>
</tr>
<tr>
<th>1</th>
<td>04090100225</td>
<td>
Replacement Of Double pole rocker switch body OFF/ON Momentary
for firefighting man truck type: Tgs 33.360
</td>
<td>1</td>
<td>EA</td>
<td>31-Aug-23</td>
<td></td>
<td>5,000.00</td>
<td>5,000.00</td>
</tr>
<tr>
<th>1</th>
<td>04090100225</td>
<td>
Replacement Of Double pole rocker switch body OFF/ON Momentary
for firefighting man truck type: Tgs 33.360
</td>
<td>1</td>
<td>EA</td>
<td>31-Aug-23</td>
<td></td>
<td>5,000.00</td>
<td>5,000.00</td>
</tr>
</tbody>
<tfoot class="table-secondary">
<tr>
<th class="text-end" colspan="8">Total (USD)</th>
<td>15,055.00</td>
</tr>
</tfoot>
</table>
</section>
<section>
<div class="card mb-3 shadow" style="page-break-before: always;">
<div class="card-header text-bg-secondary text-start fw-bold">
Terms And Conditions
</div>
<div class="card-body">
<table>
<thead>
<tr>
<td style="width: 4.4cm;">Payment Terms:</td>
<td>100% advance payment</td>
</tr>
<tr>
<td>Delivery Terms:</td>
<td></td>
</tr>
<tr>
<td>Delivery Place:</td>
<td>KCML</td>
</tr>
<tr>
<td>Delivery Duration:</td>
<td>3 three mostla from order confirmation and payment</td>
</tr>
<tr>
<td>Penalty:</td>
<td>
A Delay Penalty of 0.1% from the Po total amount will be applied per each delay Day/Not Over
than 10%
</td>
</tr>
<tr>
<td>Warranty:</td>
<td></td>
</tr>
<tr>
<td>Conditions:</td>
<td>FE# 20230000824</td>
</tr>
<tr>
<td>Notes and Comments:</td>
<td>Notes and Comments</td>
</tr>
</table>
</div>
</div>
</section>
<section>
<div class="d-flex justify-content-between mb-3">
<div class="card shadow" style="width: 48%">
<div class="card-header fw-bold">
Procurement Representative Signature
</div>
<div class="card-body text-center p-5"></div>
</div>
<div class="card shadow" style="width: 48%">
<div class="card-header fw-bold">
Supplier Representative Signature
</div>
<div class="card-body text-center"></div>
</div>
</div>
</section>
<section>
<div style="font-size: 18px">
<p class="text-uppercase fw-bold">
Purchasing Terms And Conditions
</p>
<p class="fw-bolder">
Application Of Conditions
</p>
</div>
</section>
</div>
</body>
</html>
