Welcome Guest Search | Active Topics | Sign In | Register

Background Image Not Displayed when HTML Rendered to PDF Options
Patrick Loftus
Posted: Monday, July 25, 2016 8:11:12 PM
Rank: Member
Groups: Member

Joined: 5/27/2015
Posts: 12
We have a page in our application that renders a certificate for the user, with the certificate graphics as a background image for the page and then the name of the user displayed "on-top" of the image.

You can see the page in action using the following link:

http://www.sdsreg.com/AKA/TEST/registration/attendance-certificate.aspx?SHOW=16005000&KEY=EF1CD0C8-BB90-4F89-B365-F8063CB8679A

Simple HTML design:

<!DOCTYPE html>

<html>
<head>
<title>SDS | AKA Certificate</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../styles/styles-reports.css" />
<script type="text/javascript" src="../js/SDSREG.js"></script>
</head>

<body>

<form id="form1" runat="server">
<div style="width:1000px; height:800px; background: url(../images/certificate_16005000.jpg) no-repeat">
<div style="height:300px; float:left; clear:both"></div>
<div style="width:1000px; float:left; clear:both">
<p style="text-align:center" class="textREPORT_BLACKxlarge"><strong>Soror Betty N. James</strong></p>
</div>
<div style="height:300px; float:left; clear:both"></div>
</div>
</form>

</body>
</html>

When the HTML is converted to PDF using HtmlToPdf, the background image is lost and we just see the text on a white background. We have a common routine for converting HTML to PDF - see below. We are passing the registrationID of the user, the output type (CERTIFICATE) and the HTMLData (from above). The file is generated properly and I can send you a copy of the PDF file from our server. The certificate image is 243 KB in size, dimensions are 1000 x 773 pixels. We do not get any errors, just no image is displayed in the resulting PDF file. The code that creates the HTML for PDF rendering is generating the PDF above, we turned off the redirect to the PDF file so you can see the HTML is working.

/*
* convertHTML2PDF
* ------------------------------------------------------------------------
* Convert HTML to PDF Document, Return File Name
* ------------------------------------------------------------------------
* Inputs:
* registrationID (int) = Registration ID
* outputType (string) = Output Type (REPORT, CERTIFICATE)
* HTMLData (string) = HTML Data
* ------------------------------------------------------------------------
* Outputs:
* results (string) = File Name to PDF Document
*
*/

public string convertHTML2PDF(int registrationID, string outputType, string HTMLData)
{
// get registration record
tblRegistrations registration = new tblRegistrations();
registration.getRegistration(registrationID);

// file prefix
string filePrefix = "";

// perform action based on Output Type
switch (outputType)
{
case "CERTIFICATE":
// file prefix = output type
filePrefix = outputType;
// Page Size = Letter, Landscape, 0.5" Margins, Do Not Auto Fit, Zoom = 100%
EO.Pdf.HtmlToPdf.Options.PageSize = new System.Drawing.SizeF(PdfPageSizes.Letter.Height, PdfPageSizes.Letter.Width);
EO.Pdf.HtmlToPdf.Options.OutputArea = new System.Drawing.RectangleF(0.5f, 0.3f, 7.5f, 10.4f);
EO.Pdf.HtmlToPdf.Options.AutoFitX = HtmlToPdfAutoFitMode.None;
EO.Pdf.HtmlToPdf.Options.AutoFitY = HtmlToPdfAutoFitMode.None;
EO.Pdf.HtmlToPdf.Options.ZoomLevel = 1;
break;
// ALL OTHER TYPES
default:
// file prefix = output type
filePrefix = outputType;
// Page Size = Letter, 0.5" Margins, Do Not Auto Fit, Zoom = 100%
EO.Pdf.HtmlToPdf.Options.PageSize = new System.Drawing.SizeF(PdfPageSizes.Letter.Width, PdfPageSizes.Letter.Height);
EO.Pdf.HtmlToPdf.Options.OutputArea = new System.Drawing.RectangleF(0.5f, 0.3f, 7.5f, 10.4f);
EO.Pdf.HtmlToPdf.Options.AutoFitX = HtmlToPdfAutoFitMode.None;
EO.Pdf.HtmlToPdf.Options.AutoFitY = HtmlToPdfAutoFitMode.None;
EO.Pdf.HtmlToPdf.Options.ZoomLevel = 1;
break;
}

// get file name for label export (file prefix-badge ID-YYYYMMDDhhmmss.pdf, where YYYYMMDD is current date, hhmmss is current time)
string fileName = filePrefix + "-" + registration.PtxtBadgeID + "-" + DateTime.Now.ToString("yyyyMMddhhmmss") + ".pdf";

// get root directory of application
string rootDirectory = AppDomain.CurrentDomain.BaseDirectory;

// get file path to file
string filePath = rootDirectory + "/exports/" + fileName;

// set large address space to handle embedded images
EO.Base.Runtime.EnableLargeAddressSpace = true;

// preserve high resolution images in document
HtmlToPdf.Options.PreserveHighResImages = true;

// convert HTML to PDF file
HtmlToPdf.ConvertHtml(HTMLData, filePath);

// return file name
return fileName;
}
Patrick Loftus
Posted: Monday, July 25, 2016 8:44:01 PM
Rank: Member
Groups: Member

Joined: 5/27/2015
Posts: 12
Wanted to see if it was background related to the div tag and style. Placed an img tag above the div that has the background CSS, same results, visible in HTML, not visible in PDF.

1st page in HTML is the <img> tag with no overlay of text.
2nd page in HTML is the <div> tag with background: url() style applied.

Page break in between.

When rendered to PDF in this case, you get two pages. First one is blank (except for a fine line on the left and top of where the image would be), second page only shows the text displayed. Not sure if the fine lines are a clue as to why this is not working.

Here is the revised HTML body. I have hard coded the img tag src and fixed the width and height to be same as the actual image (1000x773).

<form id="form1" runat="server">
<div style="width:1000px; height:773px">
<img src="../images/certificate_16005000.jpg" style="width:1000px; height:773px" />
</div>
<p style="page-break-before:always" >
<div style="width:1000px; height:773px; background: url([IMAGE-CERTIFICATE]) no-repeat">
<div style="height:300px; float:left; clear:both"></div>
<div style="width:1000px; float:left; clear:both">
<p style="text-align:center" class="textREPORT_BLACKxlarge"><strong>[SOROR-FULLNAME]</strong></p>
</div>
<div style="height:300px; float:left; clear:both"></div>
</div>
</form>
eo_support
Posted: Tuesday, July 26, 2016 6:07:23 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,080
Hi,

You need to set HtmlToPdf.Options.BaseUrl. Without that the converter won't know how to expand your "../Images/certificate_16005000.jpg" into a full Url.

Thanks!

Patrick Loftus
Posted: Tuesday, July 26, 2016 11:01:12 AM
Rank: Member
Groups: Member

Joined: 5/27/2015
Posts: 12
For all of our other designs, we automatically use the full URL (app base URL + specific item). Forgot to on that url() spec. Corrected it and it works fine.

Good to know I can use you BaseUrl option if we want to keep the image links relative.

Thanks!
eo_support
Posted: Tuesday, July 26, 2016 11:21:27 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,080
Great. Glad to hear that it works for you. Please feel free to let us know if there is anything else.


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.