I fight with printing pdf from QTextDocument object with html format. I generate QString formatted code of html page and it works fine. To test it i make using QFile a html file which have to be printed and it look greats.
But pdf file looks completly different and i don't know why.
Code:
QString html = getHtmlPrintString(FVToPrint, currentCustomer);
QTextDocument document;
document.setHtml(html);
QFile qHtmlFile("D:\\Qt\\projects\\FVGeneratorV2\\fv\\"+QString::fromStdString(FVToPrint.getFVId()) +".html");
if(qHtmlFile.open(QIODevice::WriteOnly))
{
qHtmlFile.write(html.toUtf8());
qHtmlFile.close();
}
QPrinter printer(QPrinter::PrinterResolution);
printer.setOutputFormat(QPrinter::PdfFormat);
printer.setPageSize(QPageSize::A4);
QString fvname = "D:\\Qt\\projects\\FVGeneratorV2\\fv\\" + QString::fromStdString(FVToPrint.getFVId()) + ".pdf";
printer.setOutputFileName(fvname);
printer.setPageMargins(QMarginsF(15, 15, 15, 15));
document.print(&printer);
Html file code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<style type='text/css'>table, tr, td{border: solid 1px black; border-collapse:collapse;}</style>
</head>
<body>
<div style='width:100%; height:100%; margin:0; padding: 0;'>
<div style='float:left; border: solid 2px black; width:42%; margin-right:2%; margin-left:2%; padding:2%; height:5%;'>
<h2><b>FV_24.01.2022_666_1_480</h2></b>
</div>
<div style='float:left; padding:2%; margin-right:2%; border: solid 2px black; width:42%; height:5%;'>
24.01.2022
</div>
<div style='clear:both;'></div>
<div style='float:left; border: solid 2px black; width:42%; margin-right:2%; margin-top:1%; margin-left:2%; padding:2%; height:15%;'>
kunito</br> Nip: 8712314</br> Phone: 9123412</br> Email: mail#com</br>miejska 12</br>47821 krakow, Polska</br>
</div>
<div style='float:left; margin-top:1%; padding:2%; margin-right:2%; border: solid 2px black; width:42%; height:15%;'>
Customer: </br> Name: test </br> Nip: 12398401</br>miejska 27</br>81293 Krakow, Polska</br>
</div>
<div style='clear:both;'></div>
<div style=' margin: 1% 2% 0 2%; padding:2%; border: solid 2px black; width:90.5%; height:10%;'> Payment data: </br>online transfer</br> Account number: 8912384</br> Title: FV_24.01.2022_666_1_480
</div>
<div style=' margin: 1% 2% 0 2%; padding:2%; width:90.5%; height:30%;'>
<table style='width:100%;'><tr style='background-color:darkgray;' ><td>Nb.</td><td>Name</td><td>Um</td><td>Quantity</td><td>Price netto</td><td>Vat</td><td>Vat value</td><td>Price brutto</td></tr><tr><td>1</td><td>Bulka</td><td>pcs</td><td>1</td><td>1.012</td><td>8</td><td>0.088</td><td>1.1</td></tr><tr style='background-color:darkgray;' ><td colspan='5'></td><td>Netto sum</td><td>Vat sum</td><td>Sum</td></tr><tr><td colspan='5'></td><td>1.012</td><td>0.088</td><td>1.1</td></tr>
</table>
</div>
<div style=' margin: 1% 2% 0 2%; padding:2%; width:90.5%; height:5%;'>
To pay: 1.1 zl </br> Payed: 1.1 zl
</div>
<div style=' margin: 1% 2% 0 2%; padding:2%; width:90.5%; height:5%;'>
<div style='float:left; width: 20%; height:100%; '>
<p align='center'>............................</br>podpis pracownika</p>
</div>
<div style='float:left; width: 20%; height:100%; margin-left:50%; '>
<p align='center'>............................</br>podpis klienta</p>
</div>
</div>
</div>
</body>
</html>
How to pdf look:
pdf printed file
Related
Below I have provided a minimum working example of my Flask app that uses dataTable.JS to modify an existing HTML table. In cross-comparing with current examples online, I think this is due to required libraries not being loaded properly and/or that it cannot find the data.
Guidance is greatly appreciated!
HTML (base.html)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/af-2.3.7/b-2.2.2/fc-4.0.2/fh-3.2.2/sc-2.0.5/sl-1.3.4/datatables.min.css"/>
</head>
<body>
<header>
<div class="container">
<h1 class="logo"></h1>
<strong><nav>
<ul class="menu">
<li>Home</li>
<li>Entity Map</li>
</ul>
</nav></strong>
<div class = "logoimg">
<img src="{{ url_for('static',filename='images/GENERIC_PDE_PageCard.png') }}" width="10%">
</div>
</div>
</header>
<div class="container">
{% block content %}
{% endblock %}
</div>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/af-2.3.7/b-2.2.2/fc-4.0.2/fh-3.2.2/sc-2.0.5/sl-1.3.4/datatables.min.js"></script>
{% block scripts %}{% endblock %}
</body>
</html>
HTML(home.html)
{% extends "base.html" %}
{% block content %}
<div class = "home">
<h3>OCFY Entity Database</h3>
<h4>Purpose</h4>
<p>Purpose This application is designed for performing custom queries to a database containing information about private and non-public entities who are serving school-aged children and youth in the Commonwealth of Pennsylvania. Sites in this database include private or non-public licensed schools, as well as non-public entities such as residential and juvenile justice institutions.</p>
<h4>How to Search</h4>
<p>The database provides information at the site-level, as well as by several higher-order aggregates, including region, county, city, type of service, PDE Educational Entity and DHS Entity.
Use the drop-down filters within to perform a custom query that automatically displays in the table on the next tab. Selecting one or more values fromm the filters will automatically remove irrelevant values from the rest of the filters. You can also use the filters in any order. They will still show only relevant options.
The search function at the top right of the table accepts words and/or whole numbers. The search function looks across all columns for all entities in the database and displays every entity with a column containing the number and/or word that was typed.
Use the first drop down box to select multiple fields from the database. Your choices will be displayed automatically in the table. The application defaults to showing several key fields. Use backspace within the search box to remove fields from the table.</p>
</div>
<br>
<div class = "homecontent">
<div class = "sidebar">
<h4>Select Fields from Database</h4>
</div>
<div class = "tablecontainer">
<table id="entity_table" class="table table-striped">
<tr>
<th>DHS Entity Name</th>
<th>DHS Legal Name</th>
<th>Full Address</th>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
</table>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
$(document).ready(function () {
$('#entity_table').dataTable();
});
</script>
{% endblock %}
CSS (main.css)
body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
}
/*
* Formatting the header area
*/
header {
box-shadow: 3px 5px 3px #d0d1d3; /* offset x, offset y, blur radius */
background-color: #002060;
height: 90px;
width: 100%;
opacity: .9;
margin-bottom: 5px;
}
div.container {
scroll-behavior: auto;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
div.logoimg{
display: flex;
justify-content: left;
align-items: center;
}
/*
* Formatting the container contents
*/
.container {
width: 1200px;
margin: 0 auto;
}
div.homecontent{
width: 1200px;
}
div.tablecontainer {
float: right;
width: 850px;
background-color: #ffffff;
}
div.sidebar {
float: left;
box-shadow: 3px 5px 3px #d0d1d3;
text-align: center;
width: 300px;
height: 500px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #F3F4F5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
div.home {
box-shadow: 3px 5px 3px #d0d1d3;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #F3F4F5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
div.map {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #F3F4F5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
h2 {
font-size: 3em;
margin-top: 40px;
text-align: center;
letter-spacing: -2px;
}
h3 {
font-size: 1.7em;
font-weight: 100;
margin-top: 30px;
text-align: center;
letter-spacing: -1px;
color: #999;
}
.menu {
float: right;
margin-top: 8px;
}
.menu li {
display: inline;
}
.menu li + li {
margin-left: 35px;
}
.menu li a {
color: #fff;
text-decoration: none;
}
App:
from flask import Flask, render_template
ocyf = Flask(__name__)
#ocyf.route('/')
def home():
return render_template("home.html")
#ocyf.route('/map/')
def map():
return render_template("map.html")
if __name__ == '__main__':
ocyf.run(debug=True)
You must use thead and tbody tags on your table.
<table id="entity_table" class="table table-striped">
<thead>
<tr>
<th>DHS Entity Name</th>
<th>DHS Legal Name</th>
<th>Full Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
</tbody>
</table>
I am developing a form using Html and CSS. I have used grid to place my textboxes. But the problem I am facing is position of submit button. It is placed next to last textbox but I want it to be placed on the separate line at the end.
The complete code of my this form is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form practice</title>
<style>
.container{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
.wrapper{
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}
.wrapper > *{
padding: 1em;
}
.form-heading{
background-color: grey;
}
.form-heading h3{
text-align: center;
}
.contact form{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
.contact form label{
display: block;
}
.contact form p{
margin: 0;
}
.contact form .submit-btn{
grid-column: 25%;
}
.contact form button, .conntact form input{
width: 100%;
padding: 1em;
border: 1px solid;
}
.contact input[type=text]{
height: 30px;
width: 90%;
}
.contact form button{
background-color: grey;
color: white;
border: 0;
text-transform: uppercase;
}
.contact form button:hover, .contact form button:focus{
background-color: silver;
color: black;
outline: 0;
/*transition: background-color 1s ease-out; */
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="form-heading">
<h3>Form</h3>
</div>
<div class="contact">
<form>
<p>
<label>First Name</label>
<input type="text" name="firstName">
</p>
<p>
<label>Last Name</label>
<input type="text" name="lastName">
</p>
<p>
<label>Email Address</label>
<input type="text" name="email">
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phone">
</p>
<p class="submit-btn">
<button>Submit</button>
</p>
</form>
</div>
</div>
</div>
</body>
</html>
Please help me in this regard. Thank you for your help.
This does the trick in your case.
.submit-btn {
grid-row-start: 3;
grid-column-start: 3;
grid-column-end: 3;
}
But a few suggestions:
Change your <p> with <div>. <p> is for paragraphs of text.
Don't use grid for displaying a grid. It's very unflexible and makes stuff hard to read. Use display: flex instead. If you want to see a sample on how to use flex to display a grid you might wanna check out the Bootstrap grid system. (Basic grid and implementation for form. Actual Bootstrap CSS)
There is no real reason to invent your own grid system at all. Bootstrap's Grid system is just one of many already working grids. :)
You Should Follow This Grid Layout Documentatoin for manage form element into specific position.
I override the survey template. And I added the condition to show button according to if and else condition. This condition based on one selection field in survey management. But when I try to send email it shows me error following error "The content of the text doesn't contain 'URL'. URL is automatically converted into the special URL of the survey."
class InheritedSurvey(models.Model):
_inherit = 'survey.survey'
survey_type = fields.Selection([('inhouse', 'In House'),
('3rd_party', '3rd Party')], store=True, default='inhouse')
Email template if and else condition:
<record id="survey.email_template_survey" model="mail.template">
<field name="name">Survey: Send by email</field>
<field name="model_id" ref="model_survey_survey"/>
<field name="subject">${object.title}: Survey</field>
<field name="body_html" type="html">
<div style="margin: 0px; padding: 0px; font-size: 13px;">
<p style="margin: 0px; padding: 0px; font-size: 13px;">
Hello
<br/>
<br/>
We are conducting a survey, and your response would be appreciated.
% if object.survey_type == 'inhouse':
<div style="margin: 16px 0px 16px 0px;">
<a href="__URL__"
style="background-color: #875A7B; padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px; font-size:13px;">
Start Survey
</a>
</div>
% else:
<div style="margin: 16px 0px 16px 0px;">
<a t-attf-href="'%s&%s' % (__URL__, 1231)"
style="background-color: #875A7B; padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px; font-size:13px;">
Testtttttttttttttt Survey
</a>
</div>
Thanks for your participation!
</p>
</div>
</field>
<field name="auto_delete" eval="True"/>
<field name="user_signature" eval="False"/>
</record>
Thanks in advance
I recently created a new navigation bar using bootstrap. Please note that I am VERY NEW - a novice to bootstrap. When clicking on the links within the navigation bar, the links open a new window. I want the links to open within the same window.
I read somewhere that it may be individual computer settings and I changed my setting in the control panel to ensure that it is checked to "open in current window" but this doesn't seem to work. I also tried adding target=_"self" in the links as well but that seems to break the link altogether.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Company Page Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.container-fluid {
padding: 60px 50px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #d3d3d3a4;
}
.carousel-indicators li {
border-color: #006272;
text-align: right;
float: center;
right: 2% !important;
left: inherit;;
}
.carousel-indicators li.active {
background-color: #d3d3d3a4;
}
.navbar {
margin-bottom: 0;
background-color: #006272;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 2px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #006272 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>PAY</li>
<li>BENEFITS</li>
<li>POLICIES</li>
<li>TA/TM</li>
<li>MANAGER'S TOOLKIT</li>
<li>HR TEAM</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
I don't see anything in the code that suggests it should open in a new window so it might be a browser setting. That said, you have a slight error in your syntax.
This will open in a new window:
Link Text
This will open in the same window:
Link Text
Note that the _ is inside the quotes.
http://www.dunhamssports.com/wp-content/themes/ds2/css/images/pic.png
I am trying to add a red bar at the bottom of each submenu in a list I am building. Since the current sub menu ul is outputting the dark gradient background I cannot use another background image. Having trouble figuring out where in my code I might be able to trick it to appear at the bottom of each list in the submenu.
<div id="nav">
<ul id="coolMenu">
<li>Home</li>
<li>Products
<ul>
<li>Home</li>
<li>Products</li>
<li>Store Locator</li>
<li>Weekly Circular Locater</li>
</ul>
</li>
<li>Store Locator
<ul>
<li>Home</li>
<li>Products</li>
<li>Store Locator</li>
<li>Weekly Circular Locator</li>
</ul>
</li>
<li>Weekly Circular</li>
</ul>
</div>
body {background-color:#999;}
#nav {background: url(http://www.dunhamssports.com/wp-content/themes/ds2/css/images/nav.jpg) repeat-x scroll 0 0 transparent; border-bottom: 1px solid #010103; height: 46px;}
ul {list-style-type:none; padding:0px; margin:0px; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:36px; text-transform:uppercase;}
#coolMenu {float: left;list-style: none;margin:0px; font-size: 14px;}
#coolMenu > li {float: left;margin:10px 0px 0px 10px; border-right:1px solid #fff;padding-right:7px;}
#coolMenu li a {display: block; line-height: 2em; padding: 0 .5em; text-decoration: none;}
#coolMenu ul {position: absolute;display: none;z-index: 999;list-style-type:none;}
#coolMenu ul li a {width: 100%;}
#coolMenu li:hover ul {display: block;}
/* Main menu
------------------------------------------*/
#coolMenu > li > a {color:#fff;font-weight: normal;}
#coolMenu > li:hover > a {color: #fff; border-bottom:9px solid #920001;}
#coolMenu > li > .active {color: #fff;}
/* Submenu
------------------------------------------*/
#coolMenu ul {border: 1px solid #fff; background-image:url(http://www.dunhamssports.com/wp-content/themes/ds2/css/images/dropnav-bg.png); background-repeat:repeat;text-transform:none; color:#fff; list-style-type:disc; padding-left:25px;}
#coolMenu ul li a {color: #fff; text-indent:-10px;}
#coolMenu ul li:hover a {color: #999;}
You can put in a div into the last li so you can then adjust it there like this,
<ul id="coolMenu">
<li>Home</li>
<li>Products
<ul>
<li>Home</li>
<li>Products</li>
<li>Store Locator</li>
<li>Weekly Circular Locater
<div></div>
</li>
</ul>
</li>
<li>Store Locator
<ul>
<li>Home</li>
<li>Products</li>
<li>Store Locator</li>
<li>Weekly Circular Locator
<div></div></li>
</ul>
</li>
<li>Weekly Circular</li>
</ul>
And then put in this style,
#coolMenu ul li div {
border-bottom:9px solid #920001;
width: auto;
margin-left: -20px;
}