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, May 30 '18 at 06:52
tried `options={'page-size':'A3'}` now content gets smaller but Summary is still below. However there is enough space — hard coder, May 30 '18 at 07:02
`wkhtmlpdf -O Landscape` is working fine I guess? Also, check if there is a `--enable-smart-shrinking` option. — Nishant, May 30 '18 at 07:04
`margin-left`, `margin-right` are negative numbers. Could that be the reason? — Mika72, May 30 '18 at 07:11

A. Cloete · Accepted Answer · 2018-05-30T08:41:36.863

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. — A. Cloete, May 30 '18 at 08:31

Pdfkit Html to pdf not working as expected in python

1 Answers1