How to avoid empty header/footer rows on new page in openhtmltopdf? - java

I am using openhtmltopdf to generate paginated tables rendering in a pdf document,
Below template rendering extra header and footer in an additional page, which shouldn't be, as there are no more rows left.
<html>
<head>
<style>
#page {
size: 400px 350px;
}
table {
width: 100%;
font-size: 16px;
border-collapse: collapse;
/* The magical table pagination property. */
-fs-table-paginate: paginate;
/* Recommended to avoid leaving thead on a page by itself. */
-fs-page-break-min-height: 1.5cm;
}
tr,
thead,
tfoot {
page-break-inside: avoid;
}
td,
th {
padding: 6px;
border: 1px solid gray;
}
tfoot td {
background-color: aqua;
}
thead th {
background-color: coral;
}
</style>
</head>
<body>
<table>
<caption>
<p>This example shows how to use table pagination.</p>
<p>The table header and footer are automatically reproduced on each page.</p>
</caption>
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>World!</td>
</tr>
<tr>
<td>Hello</td>
<td>World!</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>
</body>
</html>
Here is the output document screenshot for reference.
Can you please help, how to eliminate that rows?
FYI, Here is the sandbox link for quick testing : https://sandbox.openhtmltopdf.com/

Related

Flyingsaucer HTML To PDF: HTML Table row border missing for each page if table spans multiple pages

I am generating PDF from HTML. I have table in HTML which will spans to multiple pages, When table spans multiple pages I need to display last row border of each page. I don't have row borders for table(which is expected). When table not ended in single page, I should display border of last row. Below is my code samples.
Java Code:
String html = ""
ITextRenderer renderer = new ITextRenderer();
renderer.setDocumentFromString(html);
renderer.layout();
renderer.createPDF(outputStream);
HTML:
<html>
<head>
<style>
#page{
#bottom-left {
content: element(footer);
vertical-align: top;
padding-top: 10px;
}
#top-right {
content: element(header);
vertical-align: bottom;
padding-bottom: 10px;
}
size: A4 portrait;
margin-top:5.5cm;
margin-left:3cm;
margin-right:2cm;
margin-bottom:3.3cm;
}
div.header {
display: block;
position: running(header);
border-bottom: 1px solid black;
}
div.footer {
margin-top: 0.5cm;
display: block;
position: running(footer);
border-top: 1px solid black;
}
div.content {
display: block;
width: 15.4cm;
text-align: justify;
}
#pagenumber:before {
content: counter(page);
}
#pagecount:before {
content: counter(pages);
}
</style>
</head>
<body>
<div class="header">
This is the header that will repeat on every page at top
</div>
<div class="footer" >
<p>This is the footer that will repeat on every page at bottom</p>
<p>Page <span id="pagenumber"></span> of <span id="pagecount"></span></p>
</div>
<div class="content">
<table
style="height: 250px; margin-top: 50px; border: 1px solid black"
cellpadding="0" cellspacing="0">
<tr class="heading" style="height: 1px;">
<td>Item</td>
<td>Quantity</td>
<td style="width:100px">Price</td>
<td style="text-align: right; padding-right: 20px;">Summa</td>
</tr>
<tr class="item" style="height: 24px; ">
<td>Row 1</td>
<td>19,75</td>
<td style="width:100px">10,00</td>
<td style="text-align: right; padding-right: 20px;">197,50</td>
</tr>
<tr class="item" style="height: 24px; ">
<td>Row 2</td>
<td>19,75</td>
<td style="width:100px">10,00</td>
<td style="text-align: right; padding-right: 20px;">197,50</td>
</tr>
<!-- 100 Rows -->
<tr class="item" style="height: 24px; ">
<td>Row N</td>
<td>19,75</td>
<td style="width:100px">10,00</td>
<td style="text-align: right; padding-right: 20px;">197,50</td>
</tr>
</table>
</div>
</body>
</html>
After HTML to PDF output as below

Just add the following CSS:
table {
-fs-table-paginate: paginate;
border-spacing: 0;
}
From the old Flying saucer user guide, the effect is to "modify the table layout algorithm to repeat table headers and footers on subsequent pages and improve the appearance of cells that break across pages (for example by closing and reopening borders)". As you don't have any header or footer in your table, it just adds the missing border.
The result looks like this:

Creating PDF file from HTML causes text to exceed the right margin (java + itext)

I'm using a rich text editor on the frontend to let users create PDF files (using java + itext). The problem is that when a user enters a large amount of spaces (pressing the space bar), it causes the text to exceed the right margin of the PDF file.
Normal text:
PDF:
Now I add a lot of whitespaces:
PDF:
This is the HTML template I'm using to generate the PDF:
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>#page { size: A4; margin: 15mm 15mm 30mm 15mm; #bottom-left { font-family: Verdana; font-size: 10.0pt; content: "Página " counter(page) " de " counter(pages); } } body { font-family: Verdana; font-size: 10.0pt; } table { border-collapse: collapse; border-spacing: 0; table-layout: auto; -fs-table-paginate: paginate;}
</style>
</head>
<body>
<table style="width: 100%;">
<thead>
<tr>
<th style="width: 100%;">
some header
</th>
</tr>
</thead>
<tfoot>
<tr>
<td style="width: 100%;">
some footer
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
text from rich editor goes here
</td>
</tr>
</tbody>
</table>
</body>
</html>
I already tried setting the table and the body to a specific width in pixels, but it generates the PDF with the same problem.
Here's the code that generates the PDF:
private void createPdfFile(Documento documento, String pathPdf) throws DocumentException, IOException {
PdfWriter pdfWriter = new PdfWriter(new FileOutputStream(pathPdf));
PdfDocument pdfDocument = new PdfDocument(pdfWriter);
PdfDocumentInfo pdfInfo = pdfDocument.getDocumentInfo();
pdfInfo.setCreator(creatorText);
if (!StringUtils.isEmpty(documento.getTitleMetadata())) {
pdfInfo.setTitle(documento.getTitleMetadata());
}
if (!StringUtils.isEmpty(documento.getAuthorMetadata())) {
pdfInfo.setAuthor(documento.getAuthorMetadata());
}
if (!StringUtils.isEmpty(documento.getSubjectMetadata())) {
pdfInfo.setSubject(documento.getSubjectMetadata());
}
ConverterProperties converterProperties = new ConverterProperties();
HtmlConverter.convertToPdf(htmlHeader + documento.getBodyHtml() + htmlFooter, pdfDocument, converterProperties);
pdfDocument.close();
}

I set the CSS property "table-layout" to "fixed" and it works property now. The complete HTML template is:
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>#page { size: A4; margin: 15mm 15mm 30mm 15mm; #bottom-left { font-family: Verdana; font-size: 10.0pt; content: "Página " counter(page) " de " counter(pages); } } body { font-family: Verdana; font-size: 10.0pt; } table { border-collapse: collapse; border-spacing: 0; table-layout: auto; -fs-table-paginate: paginate;}
</style>
</head>
<body>
<table style="width: 100%; table-layout: fixed;">
<thead>
<tr>
<th style="width: 100%;">
some header
</th>
</tr>
</thead>
<tfoot>
<tr>
<td style="width: 100%;">
some footer
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
text from rich editor goes here
</td>
</tr>
</tbody>
</table>
</body>
</html>

Images not visible in Gmail sent through HTML

I am trying to send mails to user who signup through our portal. Everything works fine except that image is not visible in the mail. here is the snippet of code
<html>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor='#E5E5E5' >
<STYLE>
.headerTop { background-color:#FFCC66; border-top:0px solid #000000; border-bottom:1px solid #FFFFFF; text-align:center; }
.adminText { font-size:10px; color:#996600; line-height:200%; font-family:verdana; text-decoration:none; }
.headerBar { background-color:#FFFFFF; border-top:0px solid #333333; border-bottom:10px solid #FFFFFF; }
.title { font-size:16px; font-weight:bold; color:#295EA0; font-family:arial; line-height:110%; }
.subTitle { font-size:11px; font-weight:normal; color:#666666; font-style:italic; font-family:arial; }
.defaultText { font-size:12px; color:#000000; line-height:150%; font-family:arial; }
.footerRow { background-color:#FFFFCC; border-top:10px solid #FFFFFF; }
.footerText { font-size:10px; color:#996600; line-height:100%; font-family:verdana; }
a { color:#00F; color:#00F; color:#00F; }
</STYLE>
<table width="100%" cellpadding="10" cellspacing="0" class="backgroundTable" bgcolor='#E5E5E5' >
<tr>
<td valign="top" align="center">
<table width="550" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color:#FFFFFF;border-top:0px solid #333333;border-bottom:10px solid #FFFFFF;"><center><IMG id=editableImg1 SRC="#banner#" BORDER="0" title="Reppify" alt="Reppify" align="center"></center></td>
</tr>

I think you need to write the image full path
<tr>
<td style="background-color:#FFFFFF;border-top:0px solid #333333;border-bottom:10px solid #FFFFFF;"><center><IMG id=editableImg1 SRC="**http://www.www.com/banner.jpg**" BORDER="0" title="Reppify" alt="Reppify" align="center"></center></td>
</tr>

JSP how to store image into database from html input

I'm trying to write a code that stores images into database, then later display it on the webpage using the rollnum to retrieve it from the database. I've tried all i could but still no good, i tried reading some tutorials but still no good, anyways here's the code i'm working on. I'd be very grateful if someone could help, Thanks in Advance.
<%#page import="java.sql.*" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Registration Page</title>
<style>
body{
background-image: url('bg.png');
background-repeat: repeat;
font-family: Courier New;
margin:auto;
width: 1000px;
}
.wrap{
margin-top:10px;
border:solid 1px #000;
height:900px;
}
.header{
font-size: 50px;
font-weight: bold;
font-family: Courier New;
text-align: center;
}
.border{
border-bottom: solid 1px #000;
margin-left: 30px;
margin-right: 30px;
}
.box{
border: solid 1px #000;
padding: 8px;
margin: 30px;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<form method="post">
<br/>
<tr>
<td> Roll Number:</td> <td><input type="text" name="rollnum"/></td>
</tr>
</div>
<tr>
<td> First Name:</td> <td><input type="text" name="fname"/></td>
</tr>
<tr>
<td> Last Name:</td> <td><input type="text" name="lname"/></td>
</tr>
<tr>
<td> Course Name:</td> <td><input type="text" name="course"/></td>
</tr>
<tr>
<td> Gender:</td> <td>Male:<input type="radio" name="gender" value="Male"/> Female:<input type="radio" name="gender" value="Female"/></td>
</tr>
<tr>
<td> Address:</td> <td><input type="text" name="addr"/></td>
</tr>
<tr>
<td> State:</td> <td><input type="text" name="state"/></td>
</tr>
<tr>
<td> Photo:<input type="file" name="photo"/></td>
</tr>
<tr>
<td> <input type="submit" value="Submit" name="submit"/></td>
</tr>
</form>
</table>
<%
try{
if(request.getParameter("submit") != null){
Connection conn;
PreparedStatement prep;
String sql;
String url = "jdbc:derby://localhost:1527/reg";
Class.forName("org.apache.derby.jdbc.ClientDriver");
conn = DriverManager.getConnection(url,"uname","pass");
sql =
"insert into student (rollnum,fname,lname,course,gender,addr,state,photo)"
+"values(?,?,?,?,?,?,?,?)";
ResultSet rs = null;
prep = conn.prepareStatement(sql);
prep.setInt(1, Integer.parseInt(request.getParameter("rollnum")));
prep.setString(2, request.getParameter("fname"));
prep.setString(3, request.getParameter("lname"));
prep.setString(4, request.getParameter("course"));
prep.setString(5, request.getParameter("gender"));
prep.setString(6, request.getParameter("addr"));
prep.setString(7, request.getParameter("state"));
//prep.setString(8, request.getParameter("photo"));
Blob blob = rs.getBlob(request.getParameter("photo"));;
prep.setBlob(8, blob);
int n = prep.executeUpdate();
if(n>0){
%>
<div class="box">Registration Successful!! <b>Login Now!!</b></div>
<%
}
}
}
catch(ClassNotFoundException e){
}
catch(NumberFormatException n){
}
%>
</div>
</body>

You can follow this way:
Get the image
Convert the image with the base64 rappresentation
Store the base64 into your db
when you need the image convert again the base64 into the image

GWT grid widget with row & column headers?

I am looking for any GWT grid widget that needs to have row and column headers on X and Y axis. Those needs to be seamlessly scrollable across X and Y axis.
Essentially I am looking for a GWT widget as demonstrated in the below URL
jsfiddle.net/jschlick/Gv26h/
We need to prifix with http:// in the above URL. The above is completely implemented in Java script.
Is there any GWT widget available with above functionality?
Any help would be really appreciated.
<html>
<header>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
body, input {
/*font: 15px/1em Arial, Helvetica, sans serif;*/
}
-webkit-scrollbar {
height: 7px;
width: 7px;
-webkit-appearance: none;
}
-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,.5);
border-radius: 4px;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
#divHeader {
border-bottom: 1px solid #d7d7d7;
overflow: hidden;
padding: 0 0 5px 0;
width: 284px;
}
#firstcol {
border-right: 1px solid #d7d7d7;
height: 200px;
overflow: hidden;
padding: 0 10px;
}
#table_div {
height: 210px;
overflow: scroll;
position: relative;
width: 300px;
}
#table_div td {
}
</style>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
fnAdjustTable();
});
fnAdjustTable = function(){
var colCount = $('#firstTr>td').length; //get total number of column
var m = 0;
var n = 0;
var brow = 'mozilla';
jQuery.each(jQuery.browser, function(i, val) {
if(val == true){
brow = i.toString();
}
});
$('.tableHeader').each(function(i){
if (m < colCount){
if (brow == 'mozilla'){
$('#firstTd').css("width",$('.tableFirstCol').innerWidth());//for adjusting first td
$(this).css('width',$('#table_div td:eq('+m+')').innerWidth());//for assigning width to table Header div
}
else if (brow == 'msie'){
$('#firstTd').css("width",$('.tableFirstCol').width());
$(this).css('width',$('#table_div td:eq('+m+')').width()-2);//In IE there is difference of 2 px
}
else if (brow == 'safari'){
$('#firstTd').css("width",$('.tableFirstCol').width());
$(this).css('width',$('#table_div td:eq('+m+')').width());
}
else {
$('#firstTd').css("width",$('.tableFirstCol').width());
$(this).css('width',$('#table_div td:eq('+m+')').innerWidth());
}
}
m++;
});
$('.tableFirstCol').each(function(i){
if(brow == 'mozilla'){
$(this).css('height',$('#table_div td:eq('+colCount*n+')').outerHeight());//for providing height using scrollable table column height
}
else if(brow == 'msie'){
$(this).css('height',$('#table_div td:eq('+colCount*n+')').innerHeight()-2);
}
else {
$(this).css('height',$('#table_div td:eq('+colCount*n+')').height());
}
n++;
});
}
//function to support scrolling of title and first column
fnScroll = function(){
$('#divHeader').scrollLeft($('#table_div').scrollLeft());
$('#firstcol').scrollTop($('#table_div').scrollTop());
}
</script>
</header>
<body>
<table cellspacing="0" cellpadding="0" border="1" >
<tr>
<td id="firstTd">
</td>
<td>
<div id="divHeader">
<table cellspacing="0" cellpadding="10" border="1">
<tr>
<td>
<div class="tableHeader">28</div>
</td>
<td>
<div class="tableHeader">30</div>
</td>
<td>
<div class="tableHeader">32</div>
</td>
<td>
<div class="tableHeader">34</div>
</td>
<td>
<div class="tableHeader">36</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top">
<div id="firstcol">
<table cellspacing="0" cellpadding="10" border="1">
<tr>
<td class="tableFirstCol">32</td>
</tr>
<tr>
<td class="tableFirstCol">32.5</td>
</tr>
<tr>
<td class="tableFirstCol">33</td>
</tr>
<tr>
<td class="tableFirstCol">33.5</td>
</tr>
<tr>
<td class="tableFirstCol">34</td>
</tr>
<tr>
<td class="tableFirstCol">34.5</td>
</tr>
<tr>
<td class="tableFirstCol">36</td>
</tr>
<tr>
<td class="tableFirstCol">36.5</td>
</tr>
<tr>
<td class="tableFirstCol">38</td>
</tr>
</table>
</div>
</td>
<td valign="top">
<div id="table_div" onscroll="fnScroll()" >
<table width="500px" cellspacing="0" cellpadding="10" border="1">
<tr id="firstTr">
<td>Row1Col1</td>
<td>Row1Col2</td>
<td>Row1Col3</td>
<td>Row1Col4</td>
<td>Row1Col5</td>
</tr>
<tr>
<td>Row2Col1</td>
<td>Row2Col2</td>
<td>Row2Col3</td>
<td>Row2Col4</td>
<td>Row2Col5</td>
</tr>
<tr>
<td>Row3Col1</td>
<td>Row3Col2</td>
<td>Row3Col3</td>
<td>Row3Col4</td>
<td>Row3Col5</td>
</tr>
<tr>
<td>Row4Col1</td>
<td>Row4Col2</td>
<td>Row4Col3</td>
<td>Row4Col4</td>
<td>Row4Col5</td>
</tr>
<tr>
<td>Row5Col1</td>
<td>Row5Col2</td>
<td>Row5Col3</td>
<td>Row5Col4</td>
<td>Row5Col5</td>
</tr>
<tr>
<td>Row6Col1</td>
<td>Row6Col2</td>
<td>Row6Col3</td>
<td>Row6Col4</td>
<td>Row6Col5</td>
</tr>
<tr>
<td>Row7Col1</td>
<td>Row7Col2</td>
<td>Row7Col3</td>
<td>Row7Col4</td>
<td>Row7Col5</td>
</tr>
<tr>
<td>Row8Col1</td>
<td>Row8Col2</td>
<td>Row8Col3</td>
<td>Row8Col4</td>
<td>Row8Col5</td>
</tr>
<tr>
<td>Row9Col1</td>
<td>Row9Col2</td>
<td>Row9Col3</td>
<td>Row9Col4</td>
<td>Row9Col5</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>

Categories