我正在使用 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 后我没有得到所需的结果。
我也试过 wkhtmltopdf 和 xvfb 但没有得到想要的结果。
为了您的所有引用，我还附上了使用 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}')])
最佳答案
我找到了一个解决方案。它只是改变 HTML 和 CSS。
基本上，我使用了 background-image: linear-gradient('some degree','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% more from the previous colorCoverageEnd *
关于html - WeasyPrint 将 HTML 转换为 PDF 无法生成完美的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55059009/