代码之家  ›  专栏  ›  技术社区  ›  hard coder

pdfkit html到pdf在python中无法正常工作

python-pdfkit wkhtmltopdf python
  •  0
  • hard coder  · 技术社区  · 6 年前

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

    这就是我的网页在HTML中的样子

    enter image description here

    这就是我把它转换成pdf后得到的结果。它把“摘要”放在下一行,但我希望它在同一行。

    enter image description here

    这是我的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>
    1 回复  |  直到 6 年前
        1
  •  1
  •   A. Cloete    6 年前

    我终于得到了请求旁边的摘要。你必须在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>
    推荐文章
    Ahmed  ·  生产中的wkhtmltopdf二进制gem问题
    7 年前
    Srivi  ·  Reactjs使用phpwkhtmltopdf生成pdf
    7 年前
    andkorsh  ·  不指定特定宽度的HTML省略号
    7 年前
    Garvit Joshi  ·  wkhtmltopdf显示&B I G S T A R;代替(星形)
    7 年前
    Qazi masuduzzaman  ·  使用WKHTMLTOPDF库生成的PDF中无法使用自定义字体
    8 年前
    Yury  ·  wkhtmltopdf在Debian上的哪里查找字体?
    8 年前
    cph  ·  通过python pdfkit调用时,为什么会出现wkhtmltopdf IO错误?
    9 年前
    darko  ·  生成带有大量页眉/页脚页面的pdf时出现wkhtmltopdf错误
    10 年前
    user2614607  ·  文件保存在wkhtmltopdf中的位置
    11 年前
    NotSimon  ·  使用django包装器时出现wkhtmltopdf子进程错误,但不在shell中
    11 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号