Open GJoe2 opened 1 month ago
I have an html file, which should look like this: But when I export to pdf using this code:
html_filename = "concrete_beam_report.html" pdf_filename = "concrete_beam_report.pdf" html_path = builder.save_report(".", filename=html_filename.replace('.html', ''), open_on_save=False) pdf_path = os.path.join(".", pdf_filename) pdfkit.from_file(html_path, pdf_path)
I get this: Any idea why is this happening?
<!DOCTYPE html> <html style="background-color: #eeeeee;"> <head> <script> window.MathJax = { output: { displayOverflow: "scale", }, }; </script> <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/4.0.0-beta.7/tex-mml-chtml.min.js"></script> <style> body { box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; max-width: 850px; } p { margin-block-start: 0; margin-block-end: 0.5em; line-height: 1.1; } .calc-item { margin-block: 1.5rem; } table { border-collapse: collapse; } td, th { border: 1px solid #bdbdbd; text-align: left; padding: 8px; } th { border-bottom: 2px solid #424242; } table.striped tr:nth-child(even) { background-color: #e0e0e0; } @media print { body { box-shadow: none; max-width: none; } } </style> </head> <body style="margin-inline: auto; padding: 1rem; background-color: #ffffff;"> <h1>Concrete Beam Neutral Axis</h1><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><p>Determine the neutral axis depth in a singly reinforced concrete beam.</p></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div><h2>1. Inputs</h2><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><div style="display:flex; flex-direction:row; justify-content:flex-start"><p style="width:350px;">Area of reinforcing steel;</p> <p style="display:inline-block; margin-bottom:1rem; margin-left: 3rem">\( A_s = 3 \ \mathrm{in^2} \)</p></div></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><div style="display:flex; flex-direction:row; justify-content:flex-start"><p style="width:350px;">Yield strength of reinforcing steel;</p> <p style="display:inline-block; margin-bottom:1rem; margin-left: 3rem">\( f_y = 50 \ \mathrm{ksi} \)</p></div></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><div style="display:flex; flex-direction:row; justify-content:flex-start"><p style="width:350px;">Concrete compressive strength;</p> <p style="display:inline-block; margin-bottom:1rem; margin-left: 3rem">\( f'_c = 4 \ \mathrm{ksi} \)</p></div></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><div style="display:flex; flex-direction:row; justify-content:flex-start"><p style="width:350px;">Beam width;</p> <p style="display:inline-block; margin-bottom:1rem; margin-left: 3rem">\( b = 12 \ \mathrm{in} \)</p></div></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><div style="display:flex; flex-direction:row; justify-content:flex-start"><p style="width:350px;">Compressive stress block ratio;</p> <p style="display:inline-block; margin-bottom:1rem; margin-left: 3rem">\( \beta_1 = 0.85 \ \mathrm{} \)</p></div></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div><h2>2. Calculations</h2><div class="calc-item"><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><p>\[ \begin{align} a &= \frac{ {A_s} \cdot {f_y} }{ {0.85} \cdot {f'_c} \cdot {b} } = \frac{ 3 \ \mathrm{in^2} \cdot 50 \ \mathrm{ksi} }{ 0.85 \ \mathrm{} \cdot 4 \ \mathrm{ksi} \cdot 12 \ \mathrm{in} } \\[4pt] & \therefore a = 3.676 \ \mathrm{in} \end{align} \]</p></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div></div><div class="calc-item"><p style="margin-left: 2rem;">Neutral axis depth</p><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><p>\[ \begin{align} c &= \frac{ {a} }{ {\beta_1} } = \frac{ 3.676 \ \mathrm{in} }{ 0.85 \ \mathrm{} } \\[4pt] & \therefore c = 4.325 \ \mathrm{in} \end{align} \]</p></div> <div style="display: flex; flex-direction: column; justify-content: center;"><span>[ACI 318-14 22.2.2.4.1]</span></div></div></div><div class="calc-item"><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><p>\[ \begin{align} Check \ c \ & > \ 3.5 \\[4pt] \ 4.325 \ \mathrm{in} \ & > \ 3.5 \\[4pt] &\therefore OK \end{align} \]</p></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div></div> </body> </html>
I have an html file, which should look like this:
But when I export to pdf using this code:
I get this:
Any idea why is this happening?