WeasyPrint преобразование HTML в PDF не удалось получить идеальный результат - PullRequest
Новая
       17

WeasyPrint преобразование HTML в PDF не удалось получить идеальный результат

1 голос
/ 08 марта 2019

Я работаю с WeasyPrint и конвертирую HTML в PDF. Я пытаюсь повторить круговой индикатор в процентах от HTML до PDF. Круговой индикатор выполнения в процентах использует свойство transform и clip CSS. Но фактический результат отличается от ожидаемого результата.

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 я не получаю требуемый результат. enter image description here

Я также пробовал wkhtmltopdf с xvfb, но не получил желаемого результата.

Для всей вашей справки я также прилагаю код для преобразования HTML в PDF, используя weasyprit 

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}')])

1 Ответ

1 голос
/ 11 марта 2019

Я нашел решение. Это просто изменение HTML и CSS.

В основном я использовал background-image: linear-Градиент ('некоторая степень', '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>

* Основное изменение, которое я сделал в приведенном выше коде, заключается в том, что мне пришлось запустить color2Coverage на 0,1% больше, чем в предыдущем colorCoverageEnd *

...