Convert HTML to PDF in Java using Aspose.PDF - Issues with CSS

Aspose.PDF Product Family
1

how to make the ‘div float’ work?

<div style="background-color: green; width: 210mm; font-size: 14px;">
    <div style="width: 50%; float: left;">
        <p>left</p>
        <p>left</p>
        <p>left</p>
    </div>
    <div style="width: 30%; float: right;background-color: #006699;">
        <p>right</p>
        <p>right</p>
        <p>right</p>
    </div>
    <br clear="all"/>
</div>
<div style="background-color: blue; width: 200mm; font-size: 14px;">
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
</div>

but,the css not work well~

2

i am using java for aspose.pdf

3

@tssugneng

Are you trying to convert the HTML into PDF? Please let us know if you are using HtmlFragment or directly converting it? It would be helpful to investigate if you could please share a sample code snippet. We will test the scenario in our environment and address it accordingly.

4

I am convert the html to pdf with aspose.pdf.
Now i am using directly converting.
the java code is：

String basePath = "C:\\ryan\\html\\images\\";
HtmlLoadOptions htmloptions = new HtmlLoadOptions(basePath);
htmloptions.getPageInfo().setWidth(PageSize.getA4().getWidth());
htmloptions.getPageInfo().setHeight(PageSize.getA4().getHeight());
htmloptions.getPageInfo().setMargin(new MarginInfo(0,0,0,0));
// Load HTML file
Document doc = new Document(inPath, htmloptions);
doc.save(outPath);

the html is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <link href="html.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="one">
        <div class="name">Andy Chen</div>
    </div>

    <div class="two">
        <p>this is red</p>
        <p>this is red</p>
        <p>this is red</p>
        <p>this is red</p>
        <p>this is red</p>
        <p>this is red</p>
        <p>this is red</p>
        <p>this is red</p>
    </div>
    
    <div class="three">
        <div class="l">
            <p>green left</p>
            <p>green left</p>
            <p>green left</p>
        </div>
        <div class="r">
            <p>blue right</p>
            <p>blue right</p>
            <p>blue right</p>
        </div>
        <div class="clear"></div>
    </div>
    
    <div class="four">
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
    </div>
</body>
</html>

the css file is:

body{padding: 0px; margin: 0px; backgro/und-image: url('bg.png'); font-size: 0px;}
/*
.clearfix:before,.clearfix:after {
    content: '';
    display: table;
}
.clearfix:after {
    clear: both;
}

.cc:after {
        content: '';
        height: 0;
        line-height: 0;
        display: block;
        visibility: hidden;
        clear: both;
    }
*/
.one{
	height:200px;background-color: #0b70bd; padding:20px; font-size: 14px;
}
	.one .name{
		margin: 30px 0; font-size:20px;color: #fff;
	}
.two{
	background-color: red; width: 595pt;font-size: 14px;
}
.three{
	background-color: green; width: 210mm; font-size: 14px;
}
.three .l{
	width: 50%; float: left;
}
.three .r{
	width: 30%; float: right;background-color: #006699;
}
.four{
	background-color: blue; width: 200mm; font-size: 14px;
}

.clear{
	clear: both;
	font-size: 0;
	height: 0;
	line-height: 0;
}

and the pdf is:
20201110140904.png (15.8 KB)

hello is up into blue!

5

which browser inside is aspose.pdf based？
the evn is win10 and jdk1.8.

6

@tssugneng

Aspose.PDF mimics the behavior of Adobe Reader. However, we have tested the scenario in our environment while using 20.10 version of the API and obtained attached output:

test20.10.pdf (36.6 KB)

We also tried to print the HTML to PDF using Chrome Browser and it produced similar output. Would you kindly share an expected output PDF that you want to generate using the API. Also, please share how you generate it at your side. We will further proceed to assist you accordingly.
printed.pdf (24.1 KB)

Furthermore, we did notice that the Blue DIV was not in proper formatting. Please let us know in case there is further issue.

7

test20.10.pdf is i wanted!
my test evn is :
win10
jdk1.8
aspose.pdf 11.0.0 for java
adobe acrobat DC

should i update the aspose.pdf to upper version or do other change ?
thank you very mach!

8

@tssugneng

You are using quite older version of the API whereas, conversion features and other functionalities have been improved a lot in latest version of the API. Please try to upgrade to the latest version as we always recommend. Also, we used following code snippet for conversion:

HtmlLoadOptions options = new HtmlLoadOptions(dataDir);
options.getPageInfo().setWidth(PageSize.getA4().getWidth());
options.getPageInfo().setHeight(PageSize.getA4().getHeight());
options.getPageInfo().setMargin(new MarginInfo(0,0,0,0));
options.setRenderToSinglePage(true);
Document document = new com.aspose.pdf.Document(dataDir + "test.html", options);
document.save(dataDir + "test20.10.pdf");