HTML to PDF conversion using Aspose.PDF for Java - no images or styling

Aspose.PDF Product Family
1

Hi,
I’m trying to convert a html file to pdf.
For some reason the images and styling are ignored. Can anyone explain why?
All the images are located under the images directory.
Thanks

the Java code:
String basePath = “C:\somePath\images”;
HtmlLoadOptions htmloptions = new HtmlLoadOptions(basePath);
// Load HTML file
Document doc = new Document(basePath + “\test2.html”, htmloptions);
// Save HTML file
doc.save(“C:\somePath\images\Web+URL_output.pdf”);

The html file:

<html>
	<head>
		<style>
		.gauge_background{
			background-repeat: no-repeat;
			width: 398px;
			height: 290px;
			position:relative;
		}
		.gauge_background.red{
			background-image: url('./gauge_red.png');
		}
		.gauge_background.orange{
			background-image: url('./gauge_orange.png');
		}
		.gauge_background.green{
			background-image: url('./gauge_green.png');
		}
		.gauge_text{
			position: absolute;
			top: 148px;
			left: 125px;
			width: 50px;
			height: 30px;
		}
		.gauge_text span{
			color: #E73C3E;
			font-size: 50px;
		}
		.gauge_title{
			text-align: center;
		}
		.gauge_title span{
			color: black;
			font-size: 32px;
		}
		.gauge_trend_arrow{
			background-repeat: no-repeat;
			width: 37px;
			height: 37px;
			top: 160px;
			left: 200px;
			position: absolute;
		}
		.gauge_trend_arrow.red{
			background-image: url('./trend_red.png');
		}
		.gauge_trend_arrow.green{
			background-image: url('./trend_green.png');
		}
		.gauges_container{
			
		}
		.gauge_container{
			display: inline-block;
			position: relative;
			width: 400px;
			height: 330px;
			overflow: hidden;
		}
		.exec_top_div{
			display: grid;
			grid-template-columns: 500px auto;
			grid-columns-gap: 10px;
		}
		.string_container{
			margin-left: 10px;
		}
		</style>
	</head>
	<body>
		<div class="exec_top_div">
			<div class="string_container">
				<b>DESCRIPTION</b>
				<div class="">
					The description bla bla bla bla
				</div>
			</div>
			<div class="gauges_container">
				<div class="gauge_container">
					<div class="gauge_background orange">
						<div class="gauge_text">
							<span>100</span>
						</div>
						<div class="gauge_trend_arrow green"></div>
					</div>
					<div class="gauge_title">
						<span>This is my title</span>
					</div>
				</div>
				<div class="gauge_container">
					<div class="gauge_background red">
						<div class="gauge_text">
							<span>30</span>
						</div>
						<div class="gauge_trend_arrow red"></div>
					</div>
					<div class="gauge_title">
						<span>This is my title 1</span>
					</div>
				</div>
			</div>
		</div>
		
	</body>
</html>
2

@yvowell

Could you please also share the images which are being referenced in the CSS. It would help us testing the scenario accordingly and share our findings with you.

3

happily! @asad.ali
images.zip (16.4 KB)
thanks!

4

@yvowell

We placed all images and HTML file (test2.html) in same folder which is dataDir variable in below code and were unable to notice any issue. The images were rendered in output PDF.

HtmlLoadOptions options = new HtmlLoadOptions(dataDir);
Document document = new com.aspose.pdf.Document(dataDir + "test2.html", options);
document.save(dataDir + "test.pdf");

test.pdf (101.3 KB)

Would you kindly confirm that images path is correctly referenced in both your HTML and API Code. Please share some steps in order to replicate the issue in our environment so that we can try to observe and address it accordingly.

5

@asad.ali
thanks again
I will check again.
It seems to me that the following style is ignored even in your reply:
.exec_top_div{
display: grid;
grid-template-columns: 500px auto;
grid-columns-gap: 10px;
}
the items are displayed in chrome side bye side.
is there a way for me to set the output pdf to be “landscape”?
Many thanks

6

@yvowell

Yes, you can create the PDF from HTML in landscape mode using following code snippet:

HtmlLoadOptions options = new HtmlLoadOptions(dataDir);
options.getPageInfo().setLandscape(true);
options.getPageInfo().setMargin(new MarginInfo(0,0,0,0));
Document document = new com.aspose.pdf.Document(dataDir + "test2.html", options);
document.save(dataDir + "test.pdf");

We tested the scenario in our environment again and noticed that ceratin CSS properties (as you already mentioned) got ignored during conversion. Hence, have logged an issue as PDFJAVA-39666 in our issue tracking system. We will further look into its details and keep you posted with the status of its correction. Please be patient and spare us some time.

We are sorry for the inconvenience.

7

@asad.ali

Thanks - i’ll be waiting for that fix.
I have two more issues:

  1. Maybe you should also add to the issue that the following css is also ignored using the attached html filetest2.zip (792 Bytes)
    :
    .inline-block-child {
    display: inline-block;
    }

  2. using the following code, the created pdf file is not landscape. why?
    public static void main(String[] args) {
    File dir = new File(“C:\tmp\newReports\images”);
    String basePath = dir.toString() + File.separator;
    HtmlLoadOptions options = new HtmlLoadOptions(basePath);
    options.getPageInfo().setLandscape(true);
    options.getPageInfo().setMargin(new MarginInfo(0,0,0,0));

    // Load HTML file
Document doc = new Document(basePath + "test2.html", options);
// Save HTML file
doc.save(basePath + "test.pdf");
System.out.println("Done!~");

    }

8

@yvowell

We have updated the issue information for this CSS property as well.

The Landscape orientation issue has already been mentioned in PDFJAVA-39666. We will inform you as soon as we have some updates regarding the issue fix.