CSS in the Story is not working properly. #3034
Description
Description of the bug
I am trying to create a utility to convert the HTML template to PDF using the PyMuPDF library.
Python Code
# generate_pdf_from_html_template.py
import fitz
from jinja2 import Template
import io
class GeneratePDFFromHTMLTemplate:
def generate_pdf_from_html_template(self, html_template, css_path, data):
def recorder(elpos):
pass
html = Template(open(html_template).read()).render(data)
css = open(css_path).read()
medibox = fitz.paper_rect("letter") # size of a page
where = medibox + (36, 36, -36, -36) # leave borders of 0.5 inches
# where = medibox
story = fitz.Story(html=html, user_css=css) # make the story
pdf_byts = io.BytesIO()
writer = fitz.DocumentWriter(pdf_byts) # make the writer
pno = 0 # current page number
more = 1 # will be set to 0 when done
while more: # loop until all story content is processed
dev = writer.begin_page(medibox) # make a device to write on the page
more, filled = story.place(where) # compute content positions on page
story.element_positions(recorder, {"page": pno}) # provide page number in addition
story.draw(dev)
writer.end_page()
pno += 1 # increase page number
writer.close() # close output file
return pdf_byts.getvalue()
if __name__ == "__main__":
pdf = GeneratePDFFromHTMLTemplate().generate_pdf_from_html_template('../templates/test.html',
'../templates/test.css', {})
f = open('test.pdf', 'wb')
f.write(pdf)
f.close()HTML file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Invoice</title>
</head>
<body>
<h1>Invoice</h1>
<table>
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Description of item 1</td>
<td>1</td>
<td>$10.00</td>
<td>$10.00</td>
</tr>
<tr>
<td>Item 2</td>
<td>Description of item 2</td>
<td>2</td>
<td>$20.00</td>
<td>$40.00</td>
</tr>
<tr>
<td>Item 3</td>
<td>Description of item 3</td>
<td>3</td>
<td>$30.00</td>
<td>$90.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" style="text-align: right;">Subtotal:</td>
<td>$140.00</td>
</tr>
<tr>
<td colspan="4" style="text-align: right;">Tax:</td>
<td>$14.00</td>
</tr>
<tr>
<td colspan="4" style="text-align: right;">Total:</td>
<td>$154.00</td>
</tr>
</tfoot>
</table>
</body>
</html>body {
font-family: Arial, sans-serif;
font-size: 14px;
color: blue;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}From the above CSS as far as I can see only the colors are being reflected in the generated pdf. No formatting and positioning of the elements is working.
The HTML originally renders like this in browser correctly as shown in the below screenshot.
But Generated PDF looks like this as shown in the below screenshot.
Could you please help me what exactly I am doing wrong?
How to reproduce the bug
Please use the above code to reproduce.
PyMuPDF version
1.23.12
Operating system
Linux
Python version
3.11