I write a program that generates an HTML report. First, my program performs the calculations and saves them in the DataFrame. The next step is to add some text before DF, format DF and save the ready HTML report. This code looks like this:
html = f'''
<html>
<head>
<title>Some title</title>
</head>
<style type ="text/css">
Here I have some table formatting like:
table {{
font-family: Arial, Helvetica, sans-serif;
width: 100%;
text-align: center;
border-collapse: collapse;
}}
</style>
<body>
Here I write some text before DF like:
<h1 style="text-align: center;">Some Text</h1>
Next, I use my DF:
{DF.to_html()}
</body>
</html>
'''
Next step is to save the ready HTML file:
with open('report.html', 'w') as f:
f.write(html)
The last step is to download this HTML file by st.download
st.download_button(label="download report",
data='report.html',
file_name="test_report.html")
When I try to open the downloaded test_report.html file, inside is only "test_report.html". I tried to open the file named: "report.html" and this looks like it should, I mean this is my ready-formatted report. I probably made something wrong when I downloaded "test_report.html", but I don't know what.
Related
I write a program in python that generates 5 reports. One of them is just text and the rest is a data frame. Right now my reports have a really simple design(basic). I need to modify the program to give user ready report that looks good and clear. In 4 of them, I need to add some text before df. The text should be formatted, just like my df. I try to do it using HTML, but I have a problem. I don't know how to modify a table. I wanted to use <style> to make some modifications but there is a problem. First I will show you my code:
html = f'''
<html>
<head>
<title>Knury Hodowlane</title>
</head>
<style type="text/css">
table
{
width: 75%
height:100px;
padding: 10px;
margin: 15px auto 15px auto;
background-color: white;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
box-shadow: 5px 5px 50px grey;
-moz-box-shadow: 5px 5px 50px grey;
-webkit-box-shadow:5px 5px 50px grey;
}
</style>
<body>
<div><img src='krowa-iz.jpg' width ="170" alt="" style="float:left;"></div>
<h1><b><center>INSTYTUT ZOOTECHNIKI</center></b></h1>
<p><h1><b><center>PAŃSTWOWY INSTYTUT BADAWCZY</center></b></h1></p>
<h3><b><center>ZAKŁAD HODOWLI TRZODY CHLEWNEJ</center></b></h3>
<p></p>
<h3><p><b><center>EKSPERTYZA NR ......</center></b></p></h3>
<p><center>W ZAKRESIE REKOMENDACJI DO BRAKOWANIA TZW "MINUS WARIANTÓW" Z POŚRÓD KNURÓW STADNYCH POD WZGLĘDEM ZBIORCZEJ WARTOŚCI HODOWLANEJ (<span style="color: red">ZWH</span>)</center></p>
<p></p>
<p></p>
<h3><p>RANKING KNURÓW STADNYCH POD WZGLĘDEM <span style="color: red">ZWH</span> (ROSNĄCO)</p></h3>
{knuryDF.to_html()}
</body>
</html>
'''
with open('raport_html.html','w') as f:
f.write(html)
In my code I use f''', I need it to insert my data frame, but in this case, my code between table and </style> is no longer text and gonna generates an error. My code in style -> table is random I just wanted to check if this gonna work. Is any way to do it right? Maybe is a much better solution that I don't know. My report doesn't need to be an HTML file. In the beginning, I wanted to write it in excel but I don't know how.
Any help will be great. Thanks for any help.
I want to generate a PDF with a specific background from three simple input-fields.
A title, a message and a signature as shown in the picture below.
Example of desired result
I have some experience with creating web-sites with Python Flask, but I struggle with how to tackle this challenge.
create a h1 containing the title, a h2 containing the message and a bottom text with some css
.bottom{
position:fixed;
bottom:0;
}
put the background-image tag on the body to have your own custom image
it would be something like this
<html>
<head>
<style>
.bottom{
position:fixed;
bottom:0;
}
</style>
</head>
<body style="background-image:url('mypicture.png'); text-align: center">
<h1>my title</h1>
<h2>my subtitle</h2>
<h2 class="bottom">bottom text</h2>
</body>
</html>
I have several icons that I want to line up at the end of the application. So that when I click on the image, I was transferred to a link. How should I do it?
So far, I have only managed to add this implementation through st.markdown.but they are arranged vertically because I added a new item every time I wrote markdown.
You can create custom components in streamlit using HTML. Maybe you can create a social media component.
Create a file my_component.html
<html>
<head>
<style>
.body {
height: 64px;
}
.parent {
width: 100%;
height: auto;
display: flex;
justify-content: center;
}
.child {
margin: 5px;
height: 32px;
width: 32px;
}
</style>
</head>
<body>
<div class="parent">
<a class = "child" href="https://www.google.com"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1200px-Google_%22G%22_Logo.svg.png" alt="alt" style="width:32px;height:32px;"></a>
<a class = "child" href="https://wwww.reddit.com"><img src="https://www.redditinc.com/assets/images/site/reddit-logo.png" alt="alt" style="width:32px;height:32px;"></a>
<a class = "child" href="https://wwww.facebook.com"><img src="https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png?w=512&h=512" alt="alt" style="width:32px;height:32px;"></a>
</div>
</body>
</html>
I've added 3 links to google, reddit,and facebook respectively. Add or edit these to something custom.
In the streamlit file, you can import HTML files as components using the components library. The implementation I'm sharing is a very simplified version.
import streamlit as st
import streamlit.components.v1 as components
HtmlFile = open("my_component.html", 'r', encoding='utf-8')
source_code = HtmlFile.read()
print(source_code)
st.text("Navbar Component")
components.html(source_code)
It's a bit basic but yields something like this.
I'm starting learning flask and I'm planning on makin a sorting algorithm visualizer using flask and I'm tryin to represent the elements of the array as bars (the height of the bars is = to the value of each element in the array). I'm thinking to use the display: block but it does not appear on the page. Pls help me or suggest anything if this is possible
html file:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="{{ url_for('static', filename='design.css') }}">
</head>
<body>
<div class="bar">
<p>test</p>
</div>
</body>
</html>
css file:
.bar{
display: inline-block;
height: 120px;
width: 5px;
background-color: red;
color: white;
}
this what only shows on my page. other css property works well this display: bar was the only problem
Normally this is an issue with browser caching. If you did not use a file and added it directly to <head> it should work
<head>
<style>
.bar{
display: inline-block; /*You want block or inline-block?*/
height: 120px;
width: 5px;
background-color: red;
color: white;
}
</style>
</head>
If you really want to use the css file, use versioning in the url:
/static/design.css/?v=1 next time /static/design.css/?v=2
But it becomes tedious. You can add a random variable like this:
import uuid
v = str(uuid.uuid4())
# url_for('static', filename='design.css', v=v)
Please clarify your answer using a screenshot of what is happening now
I have HTML file like this:
<HTML>
<HEAD>
<style>
.secret {
background-color: black;
color: black;
}
</style>
</HEAD>
<BODY>
<p>This text is VISIBLE</p>
<p id="hidden-1" style="color: white;">This text is hidden (white text background)</p>
<p id="hidden-2" class="secret">This text is hidden (black text/background)</p>
</BODY>
<HTML>
I want to write a small Python application that get HTML file as an input and detects the HTML element that makes this trick. In the case above, the output should be "hidden-1" + "hidden-2".
Additional to the example above, there are many more options to hide text in HTML. I'm looking for a solution that has the highest rate of success.
Is this possible?
Thanks
A general solution could be to use bs4 to strip all the ids / text from the html. Then use imgkit to convert the .html to .png, and read the visible text from it with an OCR such as pytesseract, then do a diff to find the "hidden" text.