I am trying to create a webapp where, the data comes from a certain API and is saved into the database. Now, I want to create a pdf using the data. I had my html Code ready with custom css and bootstrap ( using display: flex; ). I already tried using the xhtml2pdf, reportlab libraries but am not able to get it right with CSS flex properties.
The source for the HTML, and some python file are attached below.
HTML File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Invoice-ID</title>
<style type="text/css">
/* Bootstrap CSS */
.col-md-7 {
flex: 0 0 auto;
width: 58%;
}
.container {
width: 1320px;
}
.bg-light {
background-color: #f8f9fa !important;
}
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.justify-content-center {
justify-content: center;
}
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: .5rem;
padding-bottom: .5rem;
}
.navbar>.container-fluid {
display: flex;
flex-wrap: inherit;
align-items: center;
justify-content: space-between;
}
.navbar-light .navbar-brand {
color: rgba(0, 0, 0, .9);
}
.navbar-brand {
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
text-decoration: none;
white-space: nowrap;
}
.flex-column {
flex-direction: column !important;
}
.d-flex {
display: flex !important;
}
.w-50 {
width: 50% !important;
}
.ms-2 {
margin-left: .5rem !important;
}
.p-3 {
padding: 1rem !important;
}
/* Custom CSS */
body {
font-weight: 300;
font-size: 14px;
}
.wrapper {
border: 2px solid gray;
border-width: 2px;
}
#location {
/* border: 2px solid gray; */
border-right: 1px solid gray;
border-width: 1px;
margin-bottom: 2rem;
}
.header {
font-size: 20px;
font-weight: 100;
text-align: center;
color: #007cae;
}
.title {
font-size: 22px;
font-weight: 100;
padding: 10px 20px 0px 20px;
}
.title span {
color: #007cae;
}
.details {
padding: 10px 20px 0px 20px;
text-align: left !important;
}
/* . {
margin-left: 455px;
} */
.hritem {
border: 1px solid gray;
border-width: 2px;
}
</style>
</head>
<body>
<div class="mt-5 container" style="border: 2px solid gray;">
<!-- Header Start -->
<div class="d-flex justify-content-center align-items-center">
<!-- <img src="E:\Python\Django web\logiswift\Deployment\main\static\assets\logo.png" alt="Logo" width="350px"> -->
<h1>LOGO</h1>
<div class="ms-auto">
<span><b>Some Text</b></span>
</div>
</div>
<hr class="hritem"/>
<div class="d-flex justify-content-center align-items-center">
<h3>Title</h3>
<div class="ms-auto ">
<p>Date: 12-12-2021</p>
<p>Document ID: 9868</p>
</div>
</div>
<!-- Header End -->
<hr class="hritem"/>
<!-- General Trip Info Start -->
<div class="d-flex">
<div class="w-50" id="location">
<p>
<h6>Current Location</h6>
<span>Address Line 1,</span>
<span>Address Line 2,</span>
<span>City,</span>
<span>State - PIN</span>
</p>
<p>
<h6>Expected Location</h6>
<span>Address Line 1,</span>
<span>Address Line 2,</span>
<span>City,</span>
<span>State - PIN</span>
</p>
</div>
<div class="w-50 ms-2 mt-3" id="consumer">
<h6>consumer Details</h6>
<hr/>
<p>
<span style="font-size: medium; font-weight: 400;"><b>Name: </b></span>
<span>Your Name</span>
</p>
<p>
<span style="font-size: medium; font-weight: 400;"><b>Consumer ID: </b></span>
<span>Unique Consumer ID</span>
</p>
</div>
</div>
<!-- General Trip Info End -->
<hr class="hritem"/>
<!-- Bill Start -->
<!-- <div>
<p>Bill Will Come here</p>
</div> -->
<!-- Bill End -->
<!-- <hr class="hritem"/> -->
<!-- Footer Start -->
<!-- <div>
<p>Additional info like address of the company and seal comes here.</p>
</div> -->
<!-- Footer end -->
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
utils.py
from io import BytesIO
from django.http import HttpResponse
from django.template.loader import get_template
from xhtml2pdf import pisa
def render_to_pdf(template_src, context_dict={}):
template = get_template(template_src)
html = template.render(context_dict)
result = BytesIO()
pdf = pisa.pisaDocument(BytesIO(html.encode("UTF-8")), result)
if not pdf.err:
return HttpResponse(result.getvalue(), content_type='application/pdf')
return None
view.py
def generatePDF(request):
template = get_template('main/invoices.html')
context = {
"date": datetime.date.today(),
}
html = template.render(context)
pdf = render_to_pdf('main/invoices.html', context)
return HttpResponse(pdf, content_type="application/pdf")
I don't understand why the above code isn't rendering the CSS flex attributes. I even tried to use the bootstrap classes inside the style tag, but the CSS flex won't come on rendering the PDF.
Please help me out.
Thanks in advance
