pythonwkhtmltopdfpython-pdfkit
Pdfkit Html to pdf not working as expected in python
I am converting a html file to pdf using pdfkit library in python.
This is what my page looks like in html
And this is what I get after converting it to pdf. It puts "Summary" in the next line, but I want it in the same line.
Here is my python code
import pdfkit
with open("performance_report.html", "rb") as f:
str = f.read()
pdfkit.from_string(str, 'out.pdf')
I have tried Landscape mode as well by using below code in html. But same result.
<head>
<meta name="pdfkit-page-size" content="Legal"/>
<meta name="pdfkit-orientation" content="Landscape"/>
</head>
Html Code
<html>
<head>
<meta name="pdfkit-page-size" content="Legal"/>
<meta name="pdfkit-orientation" content="Landscape"/>
</head>
<h1> Performance report for date: 2018-05-27 </h1> <br><br> <div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style=" position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 75%;
max-width: 60%;
">
<div style="background-color: #fff; position: relative;
margin-bottom: 1.5rem;
border: 0;
border-radius: 0.2rem;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
margin-left: auto !important;
margin-right: auto !important;
padding-top: 0 !important;">
<div style=" padding: 0.75rem 1.25rem;
border-bottom: 1px solid transparent;
font-weight: 500;background: #F0F8FF;">Requests (%)</div>
<div style="padding: 1.25rem;padding-left: 0.5rem !important;padding-right: 0 !important;">
<img src="cid:request_offload">
</div>
</div>
</div>
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 25%;
max-width: 20%;">
<div style="background-color: #fff; position: relative;
margin-bottom: 1.5rem;
border: 0;
border-radius: 0.2rem;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
margin-left: auto !important;
margin-right: auto !important;
padding-top: 0 !important;">
<div style=" padding: 0.75rem 1.25rem;
border-bottom: 1px solid transparent;
font-weight: 500;background: #F0F8FF;">Summary</div>
<div style="padding: 1.25rem;padding-left: 1rem !important;
padding-right: 1rem !important;height: 245px; box-sizing: border-box;">
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style=" position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;">
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; font-size: 14px;
font-weight: bold; flex: 0 0 50%;
max-width: 50%;">Total:</div>
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; flex: 0 0 50%;
max-width: 50%;">1.03B </div>
</div>
<div style=" display: flex; flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px; margin-bottom: 1rem !important;margin-top: 1rem !important;"></div>
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; font-size: 14px;
font-weight: bold; flex: 0 0 50%;
max-width: 50%;">Peak:</div>
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 50%;
max-width: 50%;">2.48 %</div>
</div>
<div style="display: flex; margin-top: 0 !important;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 100%;
max-width: 100%;">
<small style="color: #808080;font-weight: normal !important;
font-size: 85% !important;">at Sun, 27 May 2018 00:50:00 -0000</small>
</div>
</div>
<div style=" display: flex; flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px; margin-bottom: 1rem !important;margin-top: 1rem !important;"></div>
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; font-size: 14px;
font-weight: bold; flex: 0 0 50%;
max-width: 50%;">Least:</div>
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; flex: 0 0 50%;
max-width: 50%;">0.45 %</div>
</div>
<div style="display: flex; margin-top: 0 !important;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 100%;
max-width: 100%;">
<small style="color: #808080;font-weight: normal !important;
font-size: 85% !important;">at Sun, 27 May 2018 13:15:00 -0000</small>
</div>
</div>
<div style=" display: flex; flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px; margin-bottom: 1rem !important;margin-top: 1rem !important;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
Solution
I finally manage to get the summary next to the requests. You have to use a table in your html. Here is an example below. It is working, the width of the two columns are not perfect, so you can just play around with the width paramaters (I removed it from the html for now):
<html>
<h1> Performance report for date: 2018-05-27 </h1> <br><br> <div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<table style="width:100%">
<tr>
<th>
<div style=" position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 75%;
max-width: 60%;
">
<div style="background-color: #fff; position: relative;
margin-bottom: 1.5rem;
border: 0;
border-radius: 0.2rem;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
margin-left: auto !important;
margin-right: auto !important;
padding-top: 0 !important;">
<div style=" padding: 0.75rem 1.25rem;
border-bottom: 1px solid transparent;
font-weight: 500;background: #F0F8FF;">Requests (%)</div>
<div style="padding: 1.25rem;padding-left: 0.5rem !important;padding-right: 0 !important;">
<img src="cid:request_offload">
</div>
</div>
</th>
<th>
</div>
<div style="position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 25%;
max-width: 20%;">
<div style="background-color: #fff; position: relative;
margin-bottom: 1.5rem;
border: 0;
border-radius: 0.2rem;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
margin-left: auto !important;
margin-right: auto !important;
padding-top: 0 !important;">
<div style=" padding: 0.75rem 1.25rem;
border-bottom: 1px solid transparent;
font-weight: 500;background: #F0F8FF;">Summary</div>
<div style="padding: 1.25rem;padding-left: 1rem !important;
padding-right: 1rem !important;height: 245px; box-sizing: border-box;">
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style=" position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;">
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; font-size: 14px;
font-weight: bold; flex: 0 0 50%;
max-width: 50%;">Total:</div>
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; flex: 0 0 50%;
max-width: 50%;">1.03B </div>
</div>
<div style=" display: flex; flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px; margin-bottom: 1rem !important;margin-top: 1rem !important;"></div>
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; font-size: 14px;
font-weight: bold; flex: 0 0 50%;
max-width: 50%;">Peak:</div>
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 50%;
max-width: 50%;">2.48 %</div>
</div>
<div style="display: flex; margin-top: 0 !important;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 100%;
max-width: 100%;">
<small style="color: #808080;font-weight: normal !important;
font-size: 85% !important;">at Sun, 27 May 2018 00:50:00 -0000</small>
</div>
</div>
<div style=" display: flex; flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px; margin-bottom: 1rem !important;margin-top: 1rem !important;"></div>
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; font-size: 14px;
font-weight: bold; flex: 0 0 50%;
max-width: 50%;">Least:</div>
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; flex: 0 0 50%;
max-width: 50%;">0.45 %</div>
</div>
<div style="display: flex; margin-top: 0 !important;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 100%;
max-width: 100%;">
<small style="color: #808080;font-weight: normal !important;
font-size: 85% !important;">at Sun, 27 May 2018 13:15:00 -0000</small>
</div>
</div>
<div style=" display: flex; flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px; margin-bottom: 1rem !important;margin-top: 1rem !important;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</th>
</tr>
</table>
</html>
- Accessing Python 3 type annotations for variables at runtime
- Identify and mark duplicates where any of them has a specific quality
- numpy.dtype size changed, may indicate binary incompatibility. Expected 96 from C header, got 88 from PyObject
- Can't install new packages for Python (Python 3.9.0, Windows 10)
- How can I set all form fields readonly in Odoo 16 depending on a field?
- Django - CreateView - Send a custom Error Message if model form is not valid
- How to rotate only Table, using borb (PDF library) python?
- Python unittest: how to run only part of a test file?
- add nested attributes to python
- How to Enumerate Threads using CreateToolhelp32Snapshot and Python ctypes?
- NotImplementedError YOLO ultralitycs
- Tuple matching using SQLAlchemy
- is there parallelism inside Ollama?
- Problem when adding dependencies to pyinstaller using poetry to manage dependencies
- The difference between <str:slug> and <slug:slug> in urls.py of Django application
- Visual Studio Code does not detect Virtual Environments
- Error print special character on results with Flask-SQLAlchemy
- Printing a list from a random sample using join()
- How to load a huggingface dataset from local path?
- Modify output from Python Pandas describe
- python Shift + enter not working in VScode with jupyter
- Logging Error: Failed to initialize logging system. Log messages may be missing.?
- Encountering connection problems with PostgreSQL when using psycopg2 on a port that has been forwarded
- Poetry stuck in infinite install/update
- How can one combine iterables keeping only the first element with each index?
- How to resolve a many-to-one-relation on insert in sqlalchemy 2.0?
- Widget with WA_TransparentForMouseEvents attribute in QSplitter. How to make it?
- WindowsError: [Error 126] The specified module could not be found
- How do I define a function with optional arguments?
- Add "b" prefix to python variable?