I have created a plotly graph in python and would like to display it on my HTML page. The problem is that the graph does not seem to fit the div propertly. Here is what I mean:
I would like it to scale based on the screen size to fit into the first column, but no matter what i do in iframe, the size of the graph itsesf remains constant. How can that be fixed?
P.S. I am unable to change the python code, so I am looking for the solution in HTML, but it would be interesting to hear how to fix this in the future in python
Here is the code for the page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>Two Equal Columns</h2>
<div class="row">
<div class="column" style="background-color:#aaa;">
<iframe id="igraph" scrolling="no" style="display: block; width: 100%; height: 100%" seamless="seamless" src="report_graph_2.html"></iframe>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
</div>
</body>
</html>
And here is a full website if you need to see the code for the plotly graph.
Related
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 want to export arabic characters to pdf using xhtml2pdf, cause I'm using it in my django app.
I know that they made an update saying that they fixed it, but it didn't work with me, I used a custom font but still not working.
So please anyone knows the right encryption for this or anyway around it, help me.
invoice.html :
{% load static %}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<head>
<title>{{title}}</title>
<style type="text/css">
#font-face {
font-family: Amiri, "Amiri Font";
src: url("{% static 'font/Amiri-Italic.ttf'%}");
}
body {
font-weight: 200;
font-size: 14px;
}
</style>
</head>
<body><pdf:language name="arabic"/>
<div class='wrapper'>
<div class='header'>
<p class='title'>Invoice # {{ invoice_ID }} </p>
</div>
<div>
<div class='details'>
<pdf:language name="arabic"/>
<p> تجربة</p>
customername : {{customer_name}} <br><hr>
<hr class='hrItem' />
</div>
</div>
</body>
</html>
utils.py :
from io import BytesIO
from django.http import HttpResponse
from django.template.loader import get_template
from xhtml2pdf import pisa
def render_to_pdf(template_src, context_dict={}):
template = get_template(template_src)
html = template.render(context_dict)
result = BytesIO()
pdf = pisa.pisaDocument(BytesIO(html.encode("UTF-8")), result)
if not pdf.err:
return HttpResponse(result.getvalue(), content_type='application/pdf')
return None
views.py :
from django.shortcuts import render, redirect, HttpResponse
import pandas as pd
from .models import SaleInvoice, TransferWays, User, InstallingCities
from siteManagment.models import MarketersManagment, WareHouses
from .utils import render_to_pdf
from django.core.validators import ValidationError
def renderPDF(request):
if request.GET:
invoice_ID = request.GET.get('invoice_ID')
if invoice_ID:
result = SaleInvoice.objects.all().filter(invoice_ID=invoice_ID).values()
df = pd.DataFrame(result)
#theUser = User.objects.all().filter(id=(df['User_id'])).values('username')
#df['total'].values
data = {
"title" : ' الفاتورة رقم {}'.format(invoice_ID),
"invoice_ID" : invoice_ID,
"customer_name" : df['customer_name'],
}
pdf = render_to_pdf('invoice.html', data)
return HttpResponse(pdf, content_type='application/pdf')
else:
raise ValidationError
else:
return redirect('admin/')
I solved it, the docs have nothing wrong actually, the problem was in the static.. because when you use {% static 'whatever' %} it's going to search the static files but for some reason it didn't work I think the problem is from django itself, maybe you can't summon static from a pdf file. anywho this is my new invoice.html ( I've put the whole path to the font ):
{% load static %}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<head>
<title>{{title}}</title>
<style type="text/css">
.header {
font-size: 20px;
font-weight: 100;
text-align: center;
color: #007cae;
}
.title {
font-size: 22px;
font-weight: 100;
/* text-align: right;*/
padding: 10px 20px 0px 20px;
}
.title span {
color: #007cae;
}
.details {
padding: 10px 20px 0px 20px;
text-align: right !important;
/*margin-left: 40%;*/
}
.hrItem {
border: none;
height: 1px;
/* Set the hr color */
color: #333;
/* old IE */
background-color: #fff;
/* Modern Browsers */
}
#font-face {font-family: RTLFont; src: url('C:\\Users\\BigBoy\\Desktop\\MyProjects\\ToysSite\\static\\font\\Amiri-Italic.ttf')} // Here
body {
font-weight: 200;
font-size: 14px;
font-family: RTLFont;
}
/* #page {
background-image: url('C:\Users\BigBoy\Desktop\MyProjects\ToysSite\static\background.png');
} */
</style>
</head>
<body>
<div class='wrapper'>
<div class='header'>
</div>
<div>
<div class='details'>
<pdf:language name="arabic"/>
اسم العميل : {{customer_name}} <br><hr>
<hr class='hrItem' />
</div>
</div>
</div>
</body>
</html>
I'm trying to generate an HTML with the dominate package in Python. For the format, I have to add a short CSS content into the <style> tag. However, the only documentation I can find is the GitHub page and that page doesn't have any function related to adding the <style>.
PS: Here's an image
Is this what you are after? from here
import dominate
from dominate.tags import link, script, style
doc = dominate.document(title='Dominate your HTML')
with doc.head:
link(rel='stylesheet', href='style.css')
script(type='text/javascript', src='script.js')
style("""\
body {
background-color: #F9F8F1;
color: #2C232A;
font-family: sans-serif;
font-size: 2.6em;
margin: 3em 1em;
}
""")
print(doc.render(pretty=True))
It yields;
<!DOCTYPE html>
<html>
<head>
<title>Dominate your HTML</title>
<link href="style.css" rel="stylesheet">
<script src="script.js" type="text/javascript"></script>
<style> body {
background-color: #F9F8F1;
color: #2C232A;
font-family: sans-serif;
font-size: 2.6em;
margin: 3em 1em;
}
</style>
</head>
<body></body>
</html>
Can I generate PDF with CSS position: absolute; for <img src="..."/> html tag?
I need to place handwritten signature and company stamp (PNG files) to bottom of order voucher at non standard place, that they run a little on the goods table. Position absolute will save my time for that, but it's don't working.
EDIT:
I have an answer from xhtml2pdf GitHub repo:
Well absolute position is not supported right now, but if you are looking for how to set images in specific part of page in all pages, see frames.
So, my question is still actual. Real usage example with xhtml2pdf frames for images will be great.
And real usage example from Luis Zárate (xhtml2pdf collaborator):
<html>
<head>
<style>
#page {
size: a4 portrait;
#frame content_frame { /* Content Frame */
left: 50pt; width: 512pt; top: 90pt; height: 632pt;
}
#frame footer_frame { /* Another static Frame */
-pdf-frame-content: footer_content;
left: 450pt; width: 300pt; top: 672pt; height: 200pt;
}
}
</style>
</head>
<body>
<!-- Content for Static Frame 'footer_frame' -->
<div id="footer_content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/123px-Tux.svg.png?download">
</div>
{% lorem 10 p %}
<pdf:pdf-next-page />
{% lorem 10 p %}
</body>
</html>
Code generates this PDF file: https://github.com/xhtml2pdf/xhtml2pdf/files/1754033/report-7.pdf
Hoping someone may have solved this problem. Haven't seen anyone with it on Google.
I'm using xhtml2pdf in Python, trying to generate a simple document with a header, footer and my content is blocks of text with titles. I'd like to have a border around each piece of content but instead I get borders around each child element instead.
Here's my HTML
#page {
size: letter;
border: 0;
#frame header_frame {
-pdf-frame-content: header;
border: 0pt solid white;
left: .75in;
width: 7in;
top: .5in;
height: 1.5in;
}
#frame content_frame {
border: 0pt solid white;
left: .75in;
width: 7in;
top: 1.5in;
height: 7.5in;
}
#frame footer_frame {
-pdf-frame-content: footer;
border: 0pt solid white;
left: .75in;
width: 7in;
top: 9.5in;
height: 1in;
}
}
h1 {
padding-top: 5pt;
}
.desc {
margin-top: 3px;
margin-bottom: 3px;
padding: 3px;
border: 1px solid blue;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>TEST TEST TEST</title>
</head>
<body>
<div id="header">
<h1>HEADER</h1>
</div>
<div id="footer">
FOOTER
</div>
<div class="desc">
<div class="title">TITLE OF ARTICLE</div>
<span>TEST 2</span>
<div>TEST 3</div>
<table>
<tr>
<td>Test4</td>
<td>Test 5</td>
</tr>
</table>
</div>
</body>
</html>
I'm just running the xhtml2pdf command line tool at the moment so there's no python to show. One thing I did notice when I run it in debug mode it shows "xhtml = false" even though I have an XHTML DTD. I'm not sure if this would make a difference.
Here's what I see in the browser and roughly what I expect the pdf to look like (ignoring the footer location of course):
Instead I get:
EDIT: I figured out that xhtml is an option to pass but passing it fails unless one has an old version of html5lib installed. Looks like the answer to my question is this library is not being actively maintained and I need to find a new solution :-/