This is a follow up to my previous question
Adding multiple images to a html file using Jinja2
I am trying to save the html created using jinja2 to pdf.
import jinja2
env = jinja2.Environment(
loader=jinja2.FileSystemLoader('.'),
trim_blocks=True,
lstrip_blocks=True,
)
template = env.get_template("template.html")
template_vars = [
{"title": "TITLE", "graph": "obj.jpg"},
{"title": "TITLE2", "graph": "obj2.jpg"},
]
#template_vars = {"title":"TITLE", "graph":'obj.png'}
text = template.render(template_vars)
with open("test.html", "w") as f_out:
f_out.write(text)
Template:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>
<h2>Graph Goes Here</h2>
<dl>
{% for image in template_vars %}
<dt>{{ image.title }}</dt>
<dd><img title="{{ image.title }}" src="{{ image.graph }}"></dd>
{% endfor %}
</dl>
</body>
</html>
To convert the html created in the above code, I tried to use pdfkit
pdfkit.from_file('test.html', 'test.pdf')
But this didn't work for me; I get the following error
Error:
File "C:\Users\xxxx\anaconda3\envs\pancreas_model\lib\site-packages\pdfkit\pdfkit.py", line 155, in handle_error
raise IOError('wkhtmltopdf reported an error:\n' + stderr)
OSError: wkhtmltopdf reported an error:
Exit with code 1 due to network error: ProtocolUnknownError
I also tried xhtml2pdf and this fails due to the image paths
with open('test.pdf', "w+b") as f_out:
pisa.CreatePDF(
src=text, # HTML to convert
dest=f_out)
WARNING:xhtml2pdf:Need a valid file name!
''
Could someone please suggest how to convert the html with multiple images to pdf?
I am not sure if I have to specify a template for the pdf output like the one specified
for html.
EDIT:
The relative path is specified in the template in the following line
<dd><img title="{{ image.title }}" src="./{{ image.graph }}"></dd>
Related
TLDR
Total n00b with rust, yew and trunk.
I want to find out how to rust, yew and trunk to build an HTML file containing just one DOM node, not a whole HTML page.
Background
Day-to-day, I use Django, the python web framework. Its admin console uses HTML template rendering, and an example of a template might look like this:
{% extends 'django_twined/question_changeform.html' %}
{% block object-tools-items %}
{% if show_set_active %}
<li>Set active</li>
{% endif %}
{{ block.super }}
{% endblock %}
Where in this example the {% %} and {{ }} get evaluated at render time into a valid HTML structure (from other template files), and the <li> is an extra node that gets added to the DOM.
Instead of a vanilla li element, I want to build a complex DOM node using Rust/Yew/Trunk. Then I can include the resulting head and body elements file in a django template, something like:
{% extends 'django_twined/question_changeform.html' %}
{% block head %}
{{ block.super }}
<!-- Include the scripts generated by trunk build -->
{% include 'my-dom-node-head.html' %}
{% endblock %}
{% block object-tools-items %}
<!-- Include the elements generated by trunk build -->
{% include 'my-dom-node-body.html' %}
{{ block.super }}
{% endblock %}
Where I'm at
I've used the yew starter app to get myself to an app. The input index.html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Yew App</title>
</head>
</html>
And the main.rs file looks like:
use yew::prelude::*;
enum Msg {
AddOne,
}
struct Model {
value: i64,
}
impl Component for Model {
type Message = Msg;
type Properties = ();
fn create(_ctx: &Context<Self>) -> Self {
Self {
value: 0,
}
}
fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
match msg {
Msg::AddOne => {
self.value += 1;
// the value has changed so we need to
// re-render for it to appear on the page
true
}
}
}
fn view(&self, ctx: &Context<Self>) -> Html {
// This gives us a component's "`Scope`" which allows us to send messages, etc to the component.
let link = ctx.link();
html! {
<div>
<button onclick={link.callback(|_| Msg::AddOne)}>{ "+1" }</button>
<p>{ self.value }</p>
</div>
}
}
}
fn main() {
yew::start_app::<Model>();
}
After trunk build, the output index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Yew App</title>
<link
rel="preload"
href="/yew-app-caccf6c60742c530_bg.wasm"
as="fetch"
type="application/wasm"
crossorigin=""
/>
<link rel="modulepreload" href="/yew-app-caccf6c60742c530.js" />
</head>
<body>
<script type="module">
import init from "/yew-app-caccf6c60742c530.js";
init("/yew-app-caccf6c60742c530_bg.wasm");
</script>
</body>
</html>
Where next?
So basically I need to get the <link> and <script> elements added by trunk build and put them into my template.
What should I do next? Would you suggest I try to:
Get trunk build --filehash false to output deterministic .js and .wasm file names without the hash (caccf6c60742c530 in this case) so that I can directly write the includes into my template (I'm concerned this will cause me development problems down the road)?
Get trunk build to output separate head link and body script?
Post-process the output index.html to extract the inserted scripts?
Alter main.rs in some way to output only what I need/want?
I am trying to load and add multiple figures from disk to a HTML file
For adding a single image, I tried the following (ref.: Jinja2/Python insert a image(s) into html)
import jinja2
env = jinja2.Environment(
loader=jinja2.FileSystemLoader('.'),
trim_blocks=True,
lstrip_blocks=True,
)
template = env.get_template("template.html")
template_vars = {"title":"TITLE", "graph":'obj.png'}
text = template.render(template_vars)
with open("test2.html", "w") as f_out:
f_out.write(text)
The template looks like the below
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>
<h2>Graph Goes Here</h2>
<img src="obj.png">
</body>
</html>
To extend this to add multiple images, I made the following modification in the template
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<h2>Graph Goes Here</h2>
<dl>
{% for key, value in template_vars.items() %}
<img src="{{value}}.png">
{% endfor %}
</dl>
</body>
</html>
I would like to know how
template_vars = {"title":"TITLE", "graph":'obj.png'}
has to be modified to pass multiple figures.
You will need to update the object type used for your variable template_vars to make things simpler to iterate. Instead of a dictionary, you likely want a list of dictionaries so that you will be able to loop over each image and get multiple attributes for each one (in your case, a value for the key title and another one for the key graph). You should also refer to your variable when calling template.render so that Jinja2 knows what you are writing about (i.e., replace template.render(template_vars) with template.render(template_vars=template_vars)).
Your updated template might look like this:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>
<h2>Graph Goes Here</h2>
<dl>
{% for image in template_vars %}
<dt>{{ image.title }}</dt>
<dd><img title="{{ image.title }}" src="{{ image.graph }}"></dd>
{% endfor %}
</dl>
</body>
</html>
Then, the part of your Python code that needs to be changed would look as follows:
template_vars = [
{"title": "TITLE", "graph": "obj.jpg"},
{"title": "TITLE2", "graph": "obj2.jpg"},
]
text = template.render(template_vars=template_vars)
This will result in the following HTML source output:
<html>
<head lang="en">
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>
<h2>Graph Goes Here</h2>
<dl>
<dt>TITLE</dt>
<dd><img title="TITLE" src="obj.jpg"></dd>
<dt>TITLE2</dt>
<dd><img title="TITLE2" src="obj2.jpg"></dd>
</dl>
</body></html>
I created an environment using pycharm & installed adminlte by git clone from https://github.com/app-generator/django-dashboard-adminlte.git. And installed adminlte3 , django3.1 & all requirements. Then run python manage.py runserver and registered a new user & was able to login ,view all pages, added new link to a html page. But I am unable to add view with jsonresponse to a button click on new page, geting Error 500 - Server Error.
My new html page is
{% extends "layouts/base.html" %}
{% block title %} Layout Boxed {% endblock %}
<!-- Element injected in the BODY element -->
{% block body_class %} sidebar-mini layout-boxed {% endblock body_class %}
<!-- Specific Page CSS goes HERE -->
{% block stylesheets %}
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
<link rel="stylesheet" href="/static/assets/css/mapstyle.css">
<link rel="stylesheet" href="/static/assets/js/pages/gis/dist/map.css">
<style>
.map {
margin: 0;
padding: 0;
width: 900px;
height: 500px;
background:white !important;
border:1px solid #ccc;
}
</style>
{% endblock stylesheets %}
{% block content %}
<div class="content-wrapper">
<div id="lyrDiv"></div>
<div id="map" class="map"></div>
<button id="search">Search</button>
</div>
{% endblock content %}
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<!-- jQuery -->
<script src="/static/assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/assets/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/assets/js/demo.js"></script>
<script src="/static/assets/js/pages/map.js"></script>
<script src="/static/assets/js/pages/search.js"></script>
{% endblock javascripts %}
search.js
$( "#search" ).click(function() {
$.get('/search/',{'csrfmiddlewaretoken':csrftoken},function(data){
alert(data); // here getting Error 500 - Server Error
});
});
I added below line to /django-dashboard-adminlte/app/urls.py
re_path(r'^search/$', search.spatial_srch, name='search'),
and search.py
from app.models import *
from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse
#csrf_exempt
def spatial_srch(request):
data= Demotable.objects.all()
searchArr = []
output = {}
for c in data:
searchArr.append({'type': 'Feature', 'properties': {'id':c.id,'name': str(c.name)},'geometry': {'type': 'Point', 'coordinates': [c.the_geom.x, c.the_geom.y]}})
output = {'type': 'FeatureCollection', 'features': searchArr}
return JsonResponse(output)
When I click on the 'Serach' button the request is not going to the view search.py What is wrong in my code ? what configuration did I miss?
The post shows
The Error 500 shows only adminlte Error page. Nothing more
The problem is in the (not so nice) way they generate the error. It's anti-pattern hell there, but in short it means there's an except thrown in either:
finding the template
loading the template
or rendering the template
and they catch it and don't let you see what happened. Not very nice code and you're have to modify that file to even begin debugging it:
#login_required(login_url="/login/")
def pages(request):
context = {}
# All resource paths end in .html.
# Pick out the html file name from the url. And load that template.
try:
load_template = request.path.split('/')[-1]
html_template = loader.get_template( load_template )
return HttpResponse(html_template.render(context, request))
except template.TemplateDoesNotExist:
html_template = loader.get_template( 'page-404.html' )
return HttpResponse(html_template.render(context, request))
# Remove or comment these lines:
#except:
#
# html_template = loader.get_template( 'page-500.html' )
# return HttpResponse(html_template.render(context, request))
Also I'm not sure this the specific spot where the error is generated, they might be doing similar things in other places.
Edit
This is very .... unprofessional code:
# Matches any html file
re_path(r'^.*\.*', views.pages, name='pages'),
No, it doesn't not match any "html" file - it matches everything cause they don't get regular expressions:
^ - start of string
.* - anything or nothing
\.* - >>>zero<<< or more dots
Result: \.* is ignored as it is irrelevant so it matches everything and if you placed your re_path below it, it will never be consulted, because Django uses first match wins approach.
So your url matches theirs, which then routes it to pages view:
load_template = request.path.split('/')[-1]
Since request.path is '/search/', '/search/'.split('/')[-1] gives the empty string and that creates your problem.
I highly suggest fixing their url path:
# Matches any html file
re_path(r'\.html$', views.pages, name='pages'),
Or put your re_path above theirs.
I'm trying to display a PIL object after converting to base64.
I'm getting the base64 value in the src tag but the response is not rendered even after decoding
import base64
import io
def newrules(request):
pic = con(select.fname)
print(pic)
buffered = io.BytesIO()
pic.save(buffered, "PNG")
img_str = base64.b64encode(buffered.getvalue())
template_code = """
{% load static %}
<!DOCTYPE HTML>
<html>
<body>
{% block pagecontent %}
<div>
<img src="data:image/png;base64,{{ img_str }}">
</div>
<div>
{{ img_str }}
</div>
</body>
{% endblock %}
</html>
"""
template = engines['django'].from_string(template_code)
return HttpResponse(template.render(context={'img_str': img_str}))
HTML souce code
terminal API call responses
Template rendered
Any help will be highly appreciated.
base64.b64encode(buffered.getvalue()) returns a byte class object. It needs to be converted to a string before passing it to a template. It can be done as follows:
img_str = base64.b64encode(buffered.getvalue()).decode('ascii')
Am working with django 1.3 and doing some template inheritance. My /static/ settings path seems to have problems once I leave the home page. Issue is, when I load home.html which inherits from base.html, the CSS and Image links work okay. But once I go to an extra URL (in this case vehicle.html), the css and image get lost with the error below:
console error
"GET /static/%20/static/images/logo_2.jpg HTTP/1.1" 404 1771
"GET /static/%20/static/css/default.css HTTP/1.1" 404 1765
view page source
<link rel="stylesheet" type="text/css" href="/static/ /static/css/default.css">
<link rel="stylesheet" type="text/css" href="/static/ /static/css/default.css">
It looks like some space is appearing from somewhere. Also, from the vehilce.html file, the page source shows that its adding an extra /static/ to the url plust the space. Where could I be going wrong? See below for my documents:
settings.py
STATIC_ROOT = 'D:/dev/workspace/vehicle_request/vehicle_request/mvmanager/static/'
STATIC_URL = '/static/'
urls.py
urlpatterns = patterns('',
url(r'^$', home_page),
(r'^admin/', include(admin.site.urls)),
(r'^media/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT}), #Not in use in my code yet
(r'^static/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.STATIC_ROOT}),
(r'^vehicle/', vehicle),
(r'^driver/', driver),
base.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/static/css/default.css">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<header>
<a href="http://localhost:8000" title="Home Page">
<img alt="logo2:" src="{{ STATIC_URL }}/static/images/logo_2.jpg"
style="float:left; margin:5px" height="100"; border=none"></a><br><br>
<h1>Vehicle Request System <span class="version">(Version 0.1 beta)</span></h1>
</header>
<hr style="clear: left">
<hr>
</body>
</html>
vehicle.html
{% extends "base.html" %}
{% block title %}Vehicle Registration{% endblock %}
{% block content %}
<html>
<head></head>
<body></body>
</html>
{% endblock %}
Thanks.
Edits
1. I've changed the stati in href="{{STATIC_URL}} /static/css/default.css"> to read static as that is how it is in my code. I must have backspaced by mistake while posting. Moving on however,
2. When I change {{STATIC_url}} /Static to {{STATIC_URL}}/Static ie. I remove the space between those two words -as suggested by #sarnold below-, home.html works as usual but vehicle.html still doesn't load the css and the image and it spews the error below in the console:
File "c:\Python27\lib\site-packages\django\core\files\storage.py", line 234, in path
raise SuspiciousOperation("Attempted access to '%s' denied." % name)
SuspiciousOperation: Attempted access to '\static\images\logo_2.jpg' denied.
[10/Feb/2012 06:11:55] "GET /static//static/images/logo_2.jpg HTTP/1.1" 500 1731
File "c:\Python27\lib\site-packages\django\core\files\storage.py", line 234, in path
raise SuspiciousOperation("Attempted access to '%s' denied." % name)
SuspiciousOperation: Attempted access to '\static\css\default.css' denied.
[10/Feb/2012 06:23:29] "GET /static//static/images/logo_2.jpg HTTP/1.1" 500 1731
3. When I combine #sarnold and #cptphil suggestions, vehicle.html loads perfectly the css and the image. home.html however fails. See the changes to base.html below:
base.html (edited to look like this)
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/default.css">
<img alt="logo2:" src="{{STATIC_URL}}images/logo_2.jpg"
home.html now doesnt' work! (viewing page source)
<link rel="stylesheet" type="text/css" href="css/default.css">
<img alt="logo2:" src="images/logo_2.jpg"
vehicle.html now works (viewing page source)
<link rel="stylesheet" type="text/css" href="/static/css/default.css">
<img alt="logo2:" src="/static/images/logo_2.jpg"
And this is how the home.html looks like in raw form
{% extends "base.html" %}
{% block title %}GEL: Vehicle Request System{% endblock %}
{% block content %}
{% endblock %}
I believe the template engine is doing what you are asking it to do.
href="{{STATIC_URL}} /stati/css/default.css"
correctly translates to
/static/ /stati/css/default.css
Try
href="{{STATIC_URL}}css/default.css"
in base.html if what you are after is
/static/css/default.css
Can't account for why home.html would work correctly though.
It looks to me like you added the spaces manually to base.html:
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}} /stati/css/defau...
<img alt="logo2:" src="{{ STATIC_URL }} /static/imag....
Take out the space before /stati/css and /static/imag and see if the problem goes away.
space = %20. Be sure to omit space from your url...
like : <script src="{% static " js/dashboard/salesPieChart.js" %}"></script>
To: <script src="{% static "js/dashboard/salesPieChart.js" %}"></script>