WeasyPrint converting HTML TO PDF failed to generate the perfect resultRecommended way to embed PDF in HTML?Convert HTML + CSS to PDF with PHP?Convert HTML to PDF in .NETConvert an image to grayscale in HTML/CSShow can i assign percentage height to a drop down (select) using cssAbsolutely positioned DIV's width not resizing based on child imageCSS border-style being reset to “none”Cannot display HTML stringGenerated PDF ignores some CSS & HTMLRendering overlay to div with border radius and overflow: hidden (Chrome only)
Can the harmonic series explain the origin of the major scale?
How to prevent YouTube from showing already watched videos?
What should I use for Mishna study?
Can the electrostatic force be infinite in magnitude?
How can I successfully establish a nationwide combat training program for a large country?
I2C signal and power over long range (10meter cable)
How do ultrasonic sensors differentiate between transmitted and received signals?
Installing PowerShell on 32-bit Kali OS fails
Could solar power be utilized and substitute coal in the 19th century?
How to deal with or prevent idle in the test team?
In Star Trek IV, why did the Bounty go back to a time when whales were already rare?
Java - What do constructor type arguments mean when placed *before* the type?
I'm in charge of equipment buying but no one's ever happy with what I choose. How to fix this?
What if somebody invests in my application?
Stereotypical names
A known event to a history junkie
Meta programming: Declare a new struct on the fly
My boss asked me to take a one-day class, then signs it up as a day off
Is there a problem with hiding "forgot password" until it's needed?
Blender - show edges angles “direction”
Is there a good way to store credentials outside of a password manager?
What is Sitecore Managed Cloud?
What is the term when two people sing in harmony, but they aren't singing the same notes?
Latex for-and in equation
WeasyPrint converting HTML TO PDF failed to generate the perfect result
Recommended way to embed PDF in HTML?Convert HTML + CSS to PDF with PHP?Convert HTML to PDF in .NETConvert an image to grayscale in HTML/CSShow can i assign percentage height to a drop down (select) using cssAbsolutely positioned DIV's width not resizing based on child imageCSS border-style being reset to “none”Cannot display HTML stringGenerated PDF ignores some CSS & HTMLRendering overlay to div with border radius and overflow: hidden (Chrome only)
I am working with WeasyPrint and is converting HTML to PDF. I am trying to replicate a circular percentage progress bar from HTML to PDF. The circular percentage progress bar uses transform and clip property of CSS. But the actual result is different from the expected result.
The HTML code is :
<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>And after generating the pdf I am not getting the required result. 
I have also tried wkhtmltopdf with xvfb but did not obtain the desired result.
For all of your reference I am also attaching the code to convert the HTML to PDF using 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')])
html css django wkhtmltopdf weasyprint
add a comment |
I am working with WeasyPrint and is converting HTML to PDF. I am trying to replicate a circular percentage progress bar from HTML to PDF. The circular percentage progress bar uses transform and clip property of CSS. But the actual result is different from the expected result.
The HTML code is :
<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>And after generating the pdf I am not getting the required result. 
I have also tried wkhtmltopdf with xvfb but did not obtain the desired result.
For all of your reference I am also attaching the code to convert the HTML to PDF using 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')])
html css django wkhtmltopdf weasyprint
add a comment |
I am working with WeasyPrint and is converting HTML to PDF. I am trying to replicate a circular percentage progress bar from HTML to PDF. The circular percentage progress bar uses transform and clip property of CSS. But the actual result is different from the expected result.
The HTML code is :
<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>And after generating the pdf I am not getting the required result. 
I have also tried wkhtmltopdf with xvfb but did not obtain the desired result.
For all of your reference I am also attaching the code to convert the HTML to PDF using 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')])
html css django wkhtmltopdf weasyprint
I am working with WeasyPrint and is converting HTML to PDF. I am trying to replicate a circular percentage progress bar from HTML to PDF. The circular percentage progress bar uses transform and clip property of CSS. But the actual result is different from the expected result.
The HTML code is :
<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>And after generating the pdf I am not getting the required result. 
I have also tried wkhtmltopdf with xvfb but did not obtain the desired result.
For all of your reference I am also attaching the code to convert the HTML to PDF using 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')])
<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> <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>html css django wkhtmltopdf weasyprint
html css django wkhtmltopdf weasyprint
asked Mar 8 at 8:06
AmanpreetAmanpreet
598
598
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I found a solution. It is just changing HTML and CSS.
Basically, I used background-image: linear-gradient('some degree','color1 color1CoverageEnd %', 'color2 color2CoverageStart %',color2) that helped me in achieving the perfect result.
<!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>*The major change which I have done in the above code is that I had to start the color2Coverage % 0.1 percent more from the previous colorCoverageEnd *
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55059009%2fweasyprint-converting-html-to-pdf-failed-to-generate-the-perfect-result%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I found a solution. It is just changing HTML and CSS.
Basically, I used background-image: linear-gradient('some degree','color1 color1CoverageEnd %', 'color2 color2CoverageStart %',color2) that helped me in achieving the perfect result.
<!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>*The major change which I have done in the above code is that I had to start the color2Coverage % 0.1 percent more from the previous colorCoverageEnd *
add a comment |
I found a solution. It is just changing HTML and CSS.
Basically, I used background-image: linear-gradient('some degree','color1 color1CoverageEnd %', 'color2 color2CoverageStart %',color2) that helped me in achieving the perfect result.
<!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>*The major change which I have done in the above code is that I had to start the color2Coverage % 0.1 percent more from the previous colorCoverageEnd *
add a comment |
I found a solution. It is just changing HTML and CSS.
Basically, I used background-image: linear-gradient('some degree','color1 color1CoverageEnd %', 'color2 color2CoverageStart %',color2) that helped me in achieving the perfect result.
<!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>*The major change which I have done in the above code is that I had to start the color2Coverage % 0.1 percent more from the previous colorCoverageEnd *
I found a solution. It is just changing HTML and CSS.
Basically, I used background-image: linear-gradient('some degree','color1 color1CoverageEnd %', 'color2 color2CoverageStart %',color2) that helped me in achieving the perfect result.
<!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>*The major change which I have done in the above code is that I had to start the color2Coverage % 0.1 percent more from the previous colorCoverageEnd *
<!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><!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>answered Mar 11 at 5:30
AmanpreetAmanpreet
598
598
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55059009%2fweasyprint-converting-html-to-pdf-failed-to-generate-the-perfect-result%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown