xhmtl2pdf supports only limited number of css properties as described in the docs page:
background-color
border-bottom-color, border-bottom-style, border-bottom-width
border-left-color, border-left-style, border-left-width
border-right-color, border-right-style, border-right-width
border-top-color, border-top-style, border-top-width
colordisplay
font-family, font-size, font-style, font-weight
height
line-height, list-style-type
margin-bottom, margin-left, margin-right, margin-top
padding-bottom, padding-left, padding-right, padding-top
page-break-after, page-break-before
size
text-align, text-decoration, text-indent
vertical-align
white-space
width
zoom
And adds few of its own for defining its own styling:
-pdf-frame-border
-pdf-frame-break
-pdf-frame-content
-pdf-keep-with-next
-pdf-next-page
-pdf-outline
-pdf-outline-level
-pdf-outline-open
-pdf-page-break
Namely it does not accept flex, border-collapse and border-spacing from your code.
Use its pages and frames to define layout instead of flex columns.
Also doc says that it has some default styling for the page, which you may dump, edit or replace like described here:
# dump
$ xhtml2pdf --css-dump > xhtml2pdf-default.css
# replace
$ xhtml2pdf --css=xhtml2pdf-default.css test.html
hey guys so i have been using this library for a while now and i just encounter this error that by using this library its not converting my css of my html properly to pdf, i used this library to generate voucher internet for my client, does anybody now how can i fix this? thanks, here’s my code
voucher.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
box-sizing: border-box;
}
.row {
display: flex;
margin-left:-5px;
margin-right:-5px;
}
.column {
flex: 50%;
padding: 5px;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 16px;
text-align: center;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
@page {
size: letter landscape;
margin: 2cm;
}
</style>
</head>
<body>
<div class="row">
{% for data in akun %}
<div class="column">
<table>
<tr>
<th colspan="2">Voucher Internet 1 Hari</th>
</tr>
<tr>
<td>Username</td>
<td>{{akun.username}}</td>
</tr>
<tr>
<td>Password</td>
<td>{{akun.password}}</td>
</tr>
<tr>
<td>Harga</td>
<td>{{akun.harga}}</td>
</tr>
<tr>
<td colspan="2">Mikadmin.net</td>
</tr>
</table>
</div>
{% endfor %}
</div>
</body>
</html>
view.py
def voucher_profile(request):
mikrotik_session = request.session.get("mikadmin")
template = get_template('voucher.html')
host = mikrotik_session.get("host")
username = mikrotik_session.get("username")
password = mikrotik_session.get("password")
con = routeros_api.RouterOsApiPool(host=host,username=username,password=password,plaintext_login=True)
api = con.get_api()
content = api.get_resource('ip/hotspot/user/profile')
content_user = api.get_resource('ip/hotspot/user')
username_paket_profile = request.POST['name-profile']
valid = request.POST['valid']
limit_bandwidth = request.POST['rate-limit']
harga_voucher = request.POST['harga-voucher']
count_generate = request.POST['count_generate']
akun = []
content.add(
name=username_paket_profile,
shared_users="1",
rate_limit=limit_bandwidth,
status_autorefresh="1m",
transparent_proxy="yes",
on_login="""{
:local pengguna $user;
:local date [/system clock get date];
:local time [/system clock get time];
:log warning "$pengguna telah login pada jam $time";
:if ([/ip hotspot user find name=$pengguna limit-uptime=%s]="") do={
/ip hotspot user set [find name=$pengguna] limit-uptime=%s
/ip hotspot active remove [find user=$pengguna]
};
:if ([/system schedule find name=$pengguna]="") do={
/system schedule add name=$pengguna interval=%s on-event="/ip hotspot user remove [find name=$pengguna]rn/ip hotspot active remove [find user=$pengguna]rn/system schedule remove [find name=$pengguna]"
}
}""" % (valid, valid, valid))
for data in range(int(count_generate)):
generate_name = "".join(random.choice(string.ascii_letters) for x in range(6))
generate_password = "".join(random.choice(string.ascii_letters) for x in range(6))
content_user.add(name=generate_name,password=generate_password,profile=username_paket_profile)
ctx = {"username":generate_name,"password":generate_password,"harga":harga_voucher}
akun.append(ctx)
context = {"akun":akun}
html = template.render(context)
nama_file = 'voucher paket generate.pdf'
file = open(nama_file, "w+b")
pisaStatus = pisa.CreatePDF(html.encode('utf-8'), dest=file,
encoding='utf-8')
file.seek(0)
pdf = file.read()
file.close()
return HttpResponse(pdf, 'application/pdf')
oh i just knew that, but how i can achieve to make my table side to side when converting it to pdf using xhtml2pdf? because the way i achieve that in my css by using flex-box, i try using the [email protected] but it seems dosent do anything at all can you give me some help or tips or maybe library that i can used to do this? thanks
Probably you need to make a table with multiple tds in each tr. If your design does not strictly require multiple tables – display a single table with multiple tds in each row. Also you may render page in browser and use js to download a pdf from it:
