Question

Я конвертирую HTML-файл в PDF, используя библиотеку pdfkit в Python.

Вот так выглядит моя страница в формате html

И вот что я получаю после преобразования ее в pdf.Он помещает «Сводку» в следующую строку, но я хочу, чтобы она была в той же строке.

Вот мой код 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>

A. Cloete · Answer 1 · 30 мая 2018

Мне, наконец, удалось получить сводку рядом с запросами.Вы должны использовать таблицу в своем HTML.Вот пример ниже.Это работает, ширина двух столбцов не идеальна, так что вы можете просто поиграться с параметрами ширины (пока я удалил его из 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

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Pdfkit Html в pdf не работает должным образом в Python

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы