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>
- AttributeError: install_layout when attempting to install a package in a virtual environment
- Python list comprehension - want to avoid repeated evaluation
- Hash algorithm for dynamic growing/streaming data?
- matplotlib - making labels for violin plots
- Python How to I check if last element has been reached in iterator tool chain?
- Polars and the Lazy API: How to drop columns that contain only null values?
- Why are my Mean, Var, and Std outputs from NumPy different from what the online grader expects?
- Correlation dataframe convertion from results from pl.corr
- Polars DataFrame transformation
- Discord rate limiting while only sending 1 request per minute
- Check if column contains (/,-,_, *or~) and split in another column - Pandas
- How to draw a rectangle at (x,y) in a PyQt GraphicsView?
- how to calculate correlation between ten columns with polars
- How to set class attribute with await in __init__
- Detect hindi encoding, response received from Facebook API in Python
- Is it possible to write a horizontal if statement with a multi-line body?
- Max length of items in list
- Cannot subclass multiprocessing Queue in Python 3.5
- How can I get notified of updates to Python packages in a unified way?
- Using python AST to traverse code and extract return statements
- merge groups of columns in a polars dataframe to single columns
- Group Pandas DataFrame by Continuous Date Ranges
- Flask login @login_required not working
- Odoo: one2many and many2one? KeyError:'___'
- merge some columns in a Polars dataframe and duplicate the others
- Python: Create table from string mixed with separators using FOR loops
- How do I type hint a method with the type of the enclosing class?
- How can I verify an emails DKIM signature in Python?
- Writing a class that accepts a callback in Python?
- Python Paramiko channel.exec_command not returning output intermittently