Question

我正在使用WeasyPrint，并将HTML转换为PDF。我正在尝试将循环百分比进度条从HTML复制到PDF。圆形百分比进度栏使用CSS的transform和clip属性。但是实际结果与预期结果不同。

HTML代码是：

   <html>
    <head>
     </head>
<style>
    body, html {
        font-size: 10px;
    }
</style>
<body>
<p>Test Page</p>
<div style="font-size: 20px;margin: 20px;position: absolute;padding: 0; width: 4.3em;height: 4.3em;background-color: white;  transform: rotate(324deg); border-radius: 50%;line-height:  5em;display: block;text-align: center;border: none;


">
    <span style="position: absolute;line-height: 5em;width: 5em;text-align: center;display: block;color: #53777A;z-index: 2;">10%</span>

    <div style="border-radius: 50%;width: 5em;height: 5em;position: absolute;">
        <div style=" position: absolute;clip: rect(0, 5em, 5em, 2.5em);background-color: #53777A;border-radius: 50%; width: 5em;height: 5em;"></div>

        <div style="position: absolute; clip: rect(0, 2.5em, 4em, 0); width: 5em;  height: 5em; border-radius: 50%; border: 0.45em solid #53777A; box-sizing: border-box; {% if is_pdf %}
            transform: rotate(324deg); {% else %}  transform: rotate(324deg);
            -webkit-transform: rotate(324deg) translateZ(0);
            -moz-transform: rotate(324deg);
            -o-transform: rotate(324deg);
            -ms-transform: rotate(324deg); {% endif %}">
        </div>
    </div>
</div>

</body>
</html>

在生成pdf之后，我没有得到所需的结果。

我还尝试了xvfb的wkhtmltopdf，但未获得预期的结果。

对于所有参考，我还将附加使用weasyprit将HTML转换为PDF的代码

from weasyprint import HTML, CSS
from django.template.loader import get_template

template = get_template('testTemplate.html')
rendered_template = template.render({"is_pdf": 
True}).encode(encoding='UTF-8')
HTML(string=rendered_template).write_pdf('test1.pdf', stylesheets= .      
[CSS(string='@page {size:A3; margin:0px}')])

Answer 1

我找到了解决方案。只是在改变HTML和CSS。

基本上，我使用了背景图像：线性渐变（“一定程度”，“ color1 color1CoverageEnd％”，“ color2 color2CoverageStart％”，color2），它帮助我获得了理想的效果。

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div style="
       text-align: center;
       padding: 0">

    <div style="
          position: relative;
          display: inline-block;
          margin: 1rem;
          width: 120px;
          height: 120px;
          border-radius: 50%;
          background-color: #ebebeb;
          background-image: linear-gradient(14.4deg, #66b8ff 50%, transparent 
          50.1%, transparent),linear-gradient(270deg, #66b8ff 50%, #ebebeb 50.1%, 
          #ebebeb);
          ">

      <span style="  font-size: 1.5rem;
             color: #8b8b8b;
             position: absolute;
             left: 50%;
             top: 50%;
             display: block;
             width: 60px;
             height: 60px;
             line-height: 60px;
             margin-left: -30px;
             margin-top: -30px;
             text-align: center;
             border-radius: 50%;
             background: #fff;
             z-index: 1;">79%</span></div>
  </div>
</body>

</html>

*我在上面的代码中所做的主要更改是，我不得不从以前的colorCoverageEnd开始，将color2Coverage％增加0.1％*

WeasyPrint将HTML转换为PDF无法生成完美结果

1 个答案: