Pdfkit Html 到 pdf 在 python 中无法正常工作

Question

我正在使用 python 中的 pdfkit 库将 html 文件转换为 pdf。

这是我的页面在 html

中的样子

这是我将其转换为 pdf 后得到的结果。它把 "Summary" 放在下一行，但我希望它在同一行。

这是我的 python 代码

import pdfkit


with open("performance_report.html", "rb") as f:
    str = f.read()
    pdfkit.from_string(str, 'out.pdf')

我在 html 中使用下面的代码也尝试过横向模式。但结果相同。

<head>
  <meta name="pdfkit-page-size" content="Legal"/>
  <meta name="pdfkit-orientation" content="Landscape"/>
</head>

Html代码

        <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>

Answer 1

我终于设法得到请求旁边的摘要。您必须在 html 中使用 table。下面是一个例子。它正在工作，两列的宽度并不完美，因此您可以随意调整宽度参数（我暂时将其从 html 中删除）：

<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>

Pdfkit Html 到 pdf 在 python 中无法正常工作

Pdfkit Html to pdf not working as expected in python

python

wkhtmltopdf

python-pdfkit