I'm trying to convert HTML to pdf using flask.
I can use the following packages.
pdfkit
wkhtmltopdf
When I run the server it cant load into the browser even the homepage cant load into the browser. I do not understand what's wrong with it.
HTML markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<h1 class="text-center mt-4">Leave Workers Details</h1>
<table class="table mt-4">
<thead class="table-dark">
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Address</th>
<th scope="col">Contact</th>
<th scope="col">LeaveDate</th>
<th scope="col">Admin</th>
</tr>
</thead>
{% for worker in leave_worker %}
<tbody>
<tr>
<td> {{ worker.id }}</td>
<td> {{ worker.leave_worker_name }} </td>
<td> {{ worker.leave_worker_address }} </td>
<td> {{ worker.leave_worker_contact }} </td>
<td> {{ worker.leave_date.strftime('%Y-%m-%d') }} </td>
<td> {{ worker.admin.username }} </td>
</tr>
</tbody>
{% endfor %}
</table>
</div>
</body>
</html>
route.py code:
config = pdfkit.configuration(wkhtmltopdf='C:\\Program Files\\wkhtmltopdf\\bin\\wkhtmltopdf.exe')
pdfkit.from_url('http://127.0.0.1:5000/leave_worker_pdf', 'output.pdf', configuration=config)
#app.route('/leave_worker_pdf')
def leave_worker_pdf():
leave_worker = LeaveWorker.query.all()
html = render_template(
"leave_worker_pdf.html",
leave_worker=leave_worker)
pdf = pdfkit.from_string(html, False)
response = make_response(pdf)
response.headers["Content-Type"] = "application/pdf"
response.headers["Content-Disposition"] = "inline; filename=output.pdf"
return response
Change
def leave_worker_pdf():
leave_worker = LeaveWorker.query.all()
html = render_template(
"leave_worker_pdf.html",
leave_worker=leave_worker)
pdf = pdfkit.from_string(html, False)
response = make_response(pdf)
response.headers["Content-Type"] = "application/pdf"
response.headers["Content-Disposition"] = "inline; filename=output.pdf"
return response
to
#app.route('/leave_worker_pdf')
def leave_worker_pdf():
leave_worker = LeaveWorker.query.all()
html = render_template(
"leave_worker_pdf.html",
leave_worker=leave_worker)
pdf = pdfkit.from_string(html, False)
response = make_response(pdf)
response.headers["Content-Type"] = "application/pdf"
response.headers["Content-Disposition"] = "inline; filename=output.pdf"
return response
this assumes that you are working with app not not with blueprints.
Related
I have no practice as a bootstrap user.
I have a table. when i set dark mode in browser then the color of text is wrong (black on black background).
What am I doing wrong?
(fg-color is only bad in table when class="table" added)
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/nav_sidebar.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/dashboard.css">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/admin/css/responsive.css">
</head>
<body>
<table class="table table-responsive table-bordered">
<thead>
<tr>
<th class="text-center" scope="col">Name</th>
<th class="text-center" scope="col">Price</th>
<th class="text-center" scope="col">Qnt</th>
</tr>
</thead>
<tbody>
<tr>
<td>product 1</td>
<td class="text-end">12,48</td>
<td class="float-right"><input class="form-control float-right" type="number" min="1" max="999"></td>
</tr>
<tr>
<td>product 2</td>
<td class="text-end">12,48</td>
<td class="float-right"><input class="form-control float-right" type="number" min="1" max="999"></td>
</tr>
<tr>
<td>product 3</td>
<td class="text-end">12,48</td>
<td class="float-right"><input class="form-control float-right" type="number" min="1" max="999"></td>
</tr>
</tbody>
</table>
</body>
</html>
I tried using a div container and some classes but it doesn't change anything.
For styling depending on browser based color mode/theme, you can use the prefers-color-scheme media query as it is used to detect whether the user has requested a light or dark theme based on operating system setting or user agent (browser in this case) settings.
You can set the color for the table using this query:
#media (prefers-color-scheme: dark) {
your-selector {
color: white;
}
}
Reference - MDN
index.ejs file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>student manangement System</title>
<link rel="stylesheet"href="https:// use.fontawesome.com/releases/v5.0.7/css/all.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
Back
<h1> Student manangement System</h1>
<form>
<input type="search"placeholder="search"id="search">
<input type="button"Value="Add"id="btn">
</form>
<div class="table">
<form action="/"method="POST">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="fname">First Name</th>
<th class="lname">Last name</th>
<th class="loc">Location</th>
<th class="mail">Email</th>
<th class="birth">DOB</th>
<th class="edu">Education</th>
<th class="update">Action</th>
<th class="del">Delete</th>
</tr>
</thead>
<tbody>
<% for(var i=0;i<users.length;i++){ %>
<tr>
<td><%= i+1%></td>
<td><%= users[i].Firstname %></td>
<td><%= users[i].Lastname %></td>
<td><%= users[i].Location %></td>
<td><%= users[i].Email %></td>
<td><%= users[i].Dob %></td>
<td><%= users[i].Education %></td>
<td class="update">Edit</td>
<td class="del">Delete</td>
</tr>
} %>
</table>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/assets/js/script.js"></script>
</body>
</html>
Error:
SyntaxError: Unexpected token 'catch' in C:\Users\Nirmal\Desktop\final\views\index.ejs while compiling ejs
If the above error is not helpful, you may want to try EJS-Lint:
https://github.com/RyanZim/EJS-Lint
Or, if you meant to create an async function, pass `async: true` as an option.
at new Function (<anonymous>)
at Template.compile (C:\Users\Nirmal\Desktop\final\node_modules\ejs\lib\ejs.js:673:12)
at Object.compile (C:\Users\Nirmal\Desktop\final\node_modules\ejs\lib\ejs.js:398:16)
at handleCache (C:\Users\Nirmal\Desktop\final\node_modules\ejs\lib\ejs.js:235:18)
at tryHandleCache (C:\Users\Nirmal\Desktop\final\node_modules\ejs\lib\ejs.js:274:16)
at View.exports.renderFile [as engine] (C:\Users\Nirmal\Desktop\final\node_modules\ejs\lib\ejs.js:491:10)
at View.render (C:\Users\Nirmal\Desktop\final\node_modules\express\lib\view.js:135:8)
at tryRender (C:\Users\Nirmal\Desktop\final\node_modules\express\lib\application.js:657:10)
at Function.render (C:\Users\Nirmal\Desktop\final\node_modules\express\lib\application.js:609:3)
at ServerResponse.render (C:\Users\Nirmal\Desktop\final\node_modules\express\lib\response.js:1039:7)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List Page</title>
</head>
<body>
<h1>List Page</h1>
INSERT DATA
<hr/>
<table width = "100%" border="1">
<tr>
<td>DELETE</td>
<td>EDIT</td>
<td>ID</td>
<td>Name</td>
<td>Model Number</td>
<td>Series</td>
</tr>
<%= data.forEach((item, index) => { %>
<tr>
<td>DELETE</td>
<td>EDIT</td>
<td><%= item.id %></td>
<td><%= item.name %></td>
<td><%= item.modelnumber %></td>
<td><%= item.series %></td>
</tr>
<%= }) %>
</table>
</body>
</html>
I'm currently having a small problem with syntaxError. I checked as
far as i can but i failed. Can you tell me is there some miss typo in
there?
I wanna show this to website but it doesn't give me a hint.. I really
have no clue of where is wrong.. Please help me..
Welcome to SO, You need to put data.foreach() without this ejs tag <%= but this ejs tag <%. So your code should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List Page</title>
</head>
<body>
<h1>List Page</h1>
INSERT DATA
<hr/>
<table width = "100%" border="1">
<tr>
<td>DELETE</td>
<td>EDIT</td>
<td>ID</td>
<td>Name</td>
<td>Model Number</td>
<td>Series</td>
</tr>
<!-- Here is the first change -->
<% data.forEach((item, index) => { %>
<tr>
<td>DELETE</td>
<td>EDIT</td>
<td><%= item.id %></td>
<td><%= item.name %></td>
<td><%= item.modelnumber %></td>
<td><%= item.series %></td>
</tr>
<!-- Here is the second change -->
<% }) %>
</table>
</body>
</html>
You should use <%%> to contain logic code , such as :
<% data.forEach((item, index) => { %>
<tr>
<td>DELETE</td>
<td>EDIT</td>
<td><%=item.id%></td>
<td><%=item.name%></td>
<td><%=item.modelnumber%></td>
<td><%=item.series%></td>
</tr>
<% }) %>
I am trying to complete web app with python and flask. I have a "search page" and "result page". In the result page, when user clicks "isbn", it goes to "detail page". I am using inheritance in flask to generate htmls based on my "layput.html" but the problem is styles.css does not work for my detail page while it is working for other pages. Here is the terminal output (stylesheet works for authentication and search but not working for detail page);
127.0.0.1 - - [01/May/2019 22:06:15] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [01/May/2019 22:06:20] "POST /authentication HTTP/1.1" 200 -
127.0.0.1 - - [01/May/2019 22:06:23] "POST /search HTTP/1.1e" 200 -
127.0.0.1 - - [01/May/2019 22:06:44] "GET /search/0375706860 HTTP/1.1" 200 -
127.0.0.1 - - [01/May/2019 22:06:44] "GET /static/styles.css HTTP/1.1" 404 -
This is my base template "layout.html"
<!DOCTYPE html>
<html>
<head>
{% block head %}
<!-- Required meta tags -->
<meta charset="utf-8">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom Styles -->
<link rel="stylesheet" href="static/styles/styles.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates" rel="stylesheet">
<title>BookReview</title>
{% endblock %}
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-sm">
<!--Links-->
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<form class="" action="{{ url_for('logout') }}" method="POST">
<input type="submit" class="btn btn-link" name="logoutButton" value="Log Out">
</form>
</li>
</ul>
</nav>
</div>
<div class="container-fluid headTitle">
<h1>Meet your next favorite book!</h1>
<h4>See bunch of book reviews and discussions to decide what to read next.</h4>
</div>
{% block body %}{% endblock %}
</body>
</html>
And here is the html of detail page;
{% extends "layout.html" %}
{% block body %}
<div class="container-fluid searchContainer">
<table class="table">
<thead>
<tr>
<th scope="col">Isbn</th>
<th scope="col">Author</th>
<th scope="col">Title</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ bookDetails.isbn }}</td>
<td>{{ bookDetails.author }}</td>
<td>{{ bookDetails.title }}</td>
<td>{{ bookDetails.year }}</td>
</tr>
</tbody>
</table>
</div>
{% endblock %}
What am I missing?
There seems to be a discrepancy here ERROR 404 is a "PAGE NOT FOUND ERROR", your href link is like this in "layout.html".
<!-- Custom Styles -->
<link rel="stylesheet" href="static/styles/styles.css">
static
|_styles
|_styles.css
BUT, in your error it shows this, GET /static/styles.css HTTP/1.1" 404
Which means its expecting this,
static
|_styles.css
Fix that and your error should be solved.
Did you notice that ?
My guess is that, your styles.css is being used only in the design.html page, hence the search for styles.css is throwing an error because location not found.
Hi i am trying to convert html contents to pdf files using JsPDF but it is convert the pdf file. But the file contains empty pdf file. There is no content to displayed like header image and date. Could any body advice to me what is the problem?
$("#btn-add").on('click', function () {
var hDate ="Test";
$('#heDate').html(hDate);
var pdf = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
pdf.fromHTML($('#cover').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
pdf.save('sample-file.pdf');
}
});
<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../Scripts/CoverLetter.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/jspdf/1.2.61/jspdf.min.js"></script>
<script type="text/javascript" src="../Scripts/html2canvas.js"></script>
<div id="cover" class="formarea">
<table>
<tr>
<td><img src="../Images/Header.png" /></td>
</tr>
<tr>
<td>
<div>
<label> Date: </label>
<label id="heDate"> </label>
</div>
<div id="editor"></div>
</td>
</tr>
</table>
</div>
<table>
<tr>
<td>
<button type="button" id="btn-add" class="btn">Create Letter</button>
</td>
</tr>
</table>
My test code which works in my local.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script type="text/javascript">
$(function () {
$("#btn-add").on('click', function () {
var hDate = "Test";
$('#heDate').html(hDate);
var pdf = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
pdf.fromHTML($('#cover')[0], 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
});
});
})
</script>
</head>
<body>
<div id="cover" class="formarea">
<table>
<tr>
<td><img src="../Images/Header.png" /></td>
</tr>
<tr>
<td>
<div>
<label> Date: </label>
<label id="heDate"> </label>
</div>
<div id="editor"></div>
</td>
</tr>
</table>
</div>
<table>
<tr>
<td>
<button type="button" id="btn-add" class="btn">Create Letter</button>
</td>
</tr>
</table>
</body>
</html>