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)
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
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.
I want to use the "Flat Json"-Bootstrap 5 Table example. [Link][1]
I am using expressjs with nodejs and ejs.
My Code so far:
```<link href="https://unpkg.com/bootstrap-table#1.18.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.18.1/dist/bootstrap-table.min.js"></script>
<body>
<h2>JOB DASHBOARD</h2>
<table id="table" data-toggle="table" data-flat="true" data-search="true" >
<thead>
<tr>
<th data-field="" data-sortable="true">Order ID</th>
<th data-field="" data-sortable="true">Liefertermin</th>
<th data-field="" data-sortable="true">Fertigstellungstermin</th>
<th data-field="" data-sortable="true">Keyline Nr</th>
</tr>
</thead>
<tbody>
<% var count = 0; %>
<% orders.forEach((order)=>{ %>
<tr data-index="<%= count %>">
<td><%= order.order_id %></td>
<td><%= order.due_at %> </td>
<td><%= order.deliver_at %> </td>
<td><%= order.keyline_obj.event.data.attributes.reference %> </td>
</tr>
<% count +=1; %>
<% }) %>
</tbody>
</table>
</body>
</html>```
I am loading the content from my mongoDB Database. The Variable "orders" is an array of order documents.
At the moment the data is loading but the searchfield doesnt appear at all and all the styling doesnt work although I have loaded the bootsrap css and js.
[1]: https://examples.bootstrap-table.com/index.html?bootstrap5#welcomes/flat-json.html
i think the problem is that the is successfully sent but the respond is in json as the browser waiting
you can check data is received or not by => clicking right click on the screen =>press inspect => Network => click on the page file => then choose Response
you will find your html page with the updated data in it
you can render it from your js script after fetching api like so
await fetch(----your fetching code-----).then(res=>{
document.open();
res.text().then(function(text) {
document.write(text)
});
})
<!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 working on an API which generates a pdf document based on an EJS template which then gets emailed to some users. When running Locally everything works as expected however when my API is pushed to heroku the pdf is generated with some odd formatting errors. Its like the page is essentially cut down the middle vertically.
Does anyone know a possible cause of this?
I am using ejs, and html-pdf
Here is the code and template
document generation function
ejs.renderFile(path.join(__dirname, '../views/', "offer.ejs"), {offerData}, (err, data) => {
if(err)
reject(err)
else
{
const options = {
"height": "11.25in",
"width": "8.5in",
"header": {
"height": "10mm"
},
"footer": {
"height": "10mm",
}
};
//creates the actual pdf doc for sending
pdf.create(data, options).toFile(`./offer_${inqID}.pdf`, function(err, res) {
if (err)
reject(err)
else
resolve(res.filename)
});
}
});
html pdf template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trade-in Disclosure Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<style>
body{
font-family: 'Roboto', sans-serif !important;
}
h1{
text-decoration: underline !important;
}
table.center {
margin-left:auto;
margin-right:auto;
}
td.rows{
padding-bottom: 10px;
text-align: left !important;
}
td.question{
padding-right: 15px;
}
span{
font-weight:bold !important;
}
</style>
</head>
<body style="border: solid black 2px; margin-left: 10px; margin-right:10px;">
<header class="text-center">
<h1 >The Auto Broker</h1>
<h2> Trade-In Vehicle Disclosure Form</h2>
<p style="margin-left: 6em; margin-right: 6em">
This Form has been filled out by the customer requesting a quote. It contains some basic details to help inform your evaluation of the vehicle.
If the customer provides false information you have the right to recind or adjust your offer to the customer; otherwise include the value of
this vehicle in your total value for the quote. Please ensure to carefully review all the data before providing a quote. Quotes are final and
cannot be altered once submitted.
</p>
</header>
<div style="padding-top:20px;">
<div class="form-container container">
<div class="row" style="background-color: black;">
<h3 style="color: aliceblue;" class="ml-2"> Vehicle History</h3>
</div>
<table class="center">
<thead>
<tr>
<th style="padding-bottom: 20px;"> <h4>Question </h4></th>
<th style="padding-bottom: 20px;"> <h4>Response </h4></th>
</tr>
</thead>
<tbody>
<tr>
<td class="rows question">Has the Vehicle been in an accident?</td>
<td class="rows"> <%= questionnaire.inaccident %> </td>
</tr>
<tr>
<td class="rows question">Have any panels been repainted, repaired <br> or replaced?</td>
<td class="rows"> <%= questionnaire.panelrepairs %> </td>
</tr>
<tr>
<td class="rows question">Are you the original owner?</td>
<td class="rows"> <%= questionnaire.originalowner %> </td>
</tr>
<tr>
<td class="rows question">Is this an American Vehicle?</td>
<td class="rows"> <%= questionnaire.usvehicle %> </td>
</tr>
<tr>
<td class="rows question">Has the Vehicle been registered in any other <br> Province/State?</td>
<td class="rows"> <%= questionnaire.outofprovreg %> </td>
</tr>
<tr>
<td class="rows question">Is the Odometer faulty, replaced or rolled back? </td>
<td class="rows"> <%= questionnaire.faultyodometer %> </td>
</tr>
<tr>
<td class="rows question">Does the vehicle have any lights on the dashboard?</td>
<td class="rows"> <%= questionnaire.dashlights %> </td>
</tr>
<tr>
<td class="rows question">Does the vehicle have any factory warranty?</td>
<td class="rows"> <%= questionnaire.factorywarranty %> </td>
</tr>
<tr>
<td class="rows question">Does the vehicle have extended warranty?</td>
<td class="rows"> <%= questionnaire.extwarrenty %> </td>
</tr>
<tr>
<td class="rows question">Was the vehicle ever used as a daily rental, <br> police vehicle, or taxi/limousine?</td>
<td class="rows">
<% if (questionnaire.rental) { %>
Rental <br>
<% } %>
<% if (questionnaire.taxilimo) { %>
Taxi / Limo <br>
<% } %>
<% if (questionnaire.policecar){ %>
Police Vehicle <br>
<% } %>
</td>
</tr>
<tr>
<td class="rows question">Does the vehicle require repairs to the following: <br>
<span style="margin-left: 10px;">Engine </span> <br>
<span style="margin-left: 10px;">Transmission/Powertrain</span> <br>
<span style="margin-left: 10px;">Electrical System </span> <br>
<span style="margin-left: 10px;">Air Conditioning System</span>
</td>
<td class="rows">
<%= questionnaire.enginerepair %> <br>
<%= questionnaire.transrepair %> <br>
<%= questionnaire.electricalrepair %> <br>
<%= questionnaire.acrepairs %> <br>
</td>
</tr>
<tr>
<td class="rows question">Additional Repair Details</td>
<td class="rows"> <%= questionnaire.repairdetails %> </td>
</tr>
<tr>
<td class="rows question">Outstanding Balance</td>
<td class="rows">
<% if (questionnaire.outstandingbalance){ %>
<%= questionnaire.outstandingbalance %>
<% } %>
</td>
</tr>
<tr>
<td class="rows question">Total Current Milage</td>
<td class="rows"> <%= questionnaire.milage %> K.M </td>
</tr>
<tr>
<td class="rows question">V.I.N</td>
<td class="rows"> <%= questionnaire.vin %> </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Proper Img
Broken Img
Was able to solve this issue by adding a single CSS style Rule.
html {
zoom: 0.55;
}
This is most likely required due to the default zoom setting of the html-pdf package. This setting and more can also be configured with options; however, i am unsure if the zoom options can be configured to < 1.
I'm facing the same prblm. I think u have to use inline CSS... u can't use bootstrap. I was facing the same problem. but now it is ok with puppeteer