Pdfkit Html to pdf not working as expected in python

Question

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>

what happens when you try pdfkit.from_file('performance_report.html', 'out.pdf') — Abhinay
– Abhinay, Commented May 30, 2018 at 6:52
tried options={'page-size':'A3'} now content gets smaller but Summary is still below. However there is enough space — hard coder
– hard coder, Commented May 30, 2018 at 7:02

A. Cloete · Accepted Answer · 2018-05-30 08:41:36Z

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>

I've copied your code and played around with it, but it does NOT work to decrease the size. sorry. I am removing the answer.

Collectives™ on Stack Overflow

Pdfkit Html to pdf not working as expected in python

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related