Html To PDF using Nreco wrong rendering

Question

I am doing a HTML to PDF program and i found nreco is the best out there. Because the converted pdf contains proper font name. Not like those i tested. The font names are a random letters.

Here is my code for the conversion. But the problem is it doesn't render images in the PDF like what is shown in my html.

public void HtmltoPdf(string[] htmlfiles, string outputLocation, float LeftMargin, float RightMargin, float TopMargin, float BottomMargin, float width, float height)
        {
            try
            {
                var htmlToPdf = new NReco.PdfGenerator.HtmlToPdfConverter();
                htmlToPdf.Margins.Bottom = float.Parse((BottomMargin * 25.4).ToString());
                htmlToPdf.Margins.Left = float.Parse((LeftMargin * 25.4).ToString());
                htmlToPdf.Margins.Right = float.Parse((RightMargin * 25.4).ToString()); 
                htmlToPdf.Margins.Top = float.Parse((TopMargin * 25.4).ToString()); ;
                htmlToPdf.PageWidth = float.Parse((width * 25.4).ToString());
                htmlToPdf.PageHeight = float.Parse((height * 25.4).ToString());
                htmlToPdf.ExecutionTimeout = new TimeSpan(0, 0, 0, 5, 0);
                htmlToPdf.GeneratePdfFromFiles(htmlfiles, null, outputLocation);

            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex.Message);
                Debug.WriteLine(ex.StackTrace);
                throw;
            }
        }

This is what my sample html look like

enter image description here

And this is the Html code

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>d3e5818</title>
  <meta content="initial-scale = 1.0, user-scalable=yes" name="viewport" />
  <link href="../Styles/template.css" rel="stylesheet" type="text/css" />
  <link href="../Styles/template_xml.css" rel="stylesheet" type="text/css" /><!--
            2016-12-08. 17:52:17.  


        -->
</head>

<body class="ilivri">
  <div class="back">
    <div class="postpage" id="titlepage_original_edition">
      <div class="div">
        <div class="figure" id="mbf__Figd3e5751"><img alt="" src="../Images/img_05_l.jpg" /></div>
      </div>
    </div>
  </div>
</body>
</html>

The rendering of other page which contains text only is very similar to the html. But with image only it renders a blank page pdf.

i even tried runnning the WkHtmlToPdf on console

enter image description here

and no error messages at all

I also tried the itext pdf

byte[] pdf; // result will be here

            var cssText = File.ReadAllText(@"\Styles\template.css");
            var html = File.ReadAllText(@"\Text\d3e2793.html");

            using (var memoryStream = new MemoryStream())
            {
                var document = new iTextSharp.text.Document(PageSize.A4, 50, 50, 60, 60);
                var writer = PdfWriter.GetInstance(document, memoryStream);
                document.Open();

                using (var cssMemoryStream = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(cssText)))
                {
                    using (var htmlMemoryStream = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(html)))
                    {
                        XMLWorkerHelper.GetInstance().ParseXHtml(writer, document, htmlMemoryStream, cssMemoryStream, FontFactory.FontImp);
                    }
                }

                document.Close();

                pdf = memoryStream.ToArray();
            }

But the Problem with itext pdf is the font name is not similar to the ones in the html. example in my html the font name is "Adobe Caslon Pro" but in my PDF rendered output the font name is Arial

and this is the css

/*@charset "utf-8";*/

/*body {font-size: 100%;}*/

.i {font-family:"ACaslonPro-Italic"; font-style: italic; }
.i-1 {font-family:"AdobeCaslonProBoldItalic";font-style: italic; }
.b {font-weight: bold;}
br {display: block;}

/*span {font-size: 127%;}*/
p.noindent {text-indent: 0em;}
.right {text-align: right;}
.center {text-align: center;}
.keep-with-next {page-break-after: avoid;}
.keep-with-previous {page-break-before: avoid;}
.div > p {text-indent: 0em;}
p.center {text-indent: 0em;}
body.body_cover {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;}
.cover {display: block;text-align: center;}
.cover > img {max-width: 100%;height: 100%;}
div.prepage {display: block;}
div.prepage > div.div > div.div_title {width: 100%;text-align: center;margin-top: 1em;margin-bottom: 1em; font-family:"AdobeCaslonProBold"}
div.prepage > div.div > p {text-indent: 0em;}
div.postpage {display: block;}
div.postpage > div.div > p {text-indent: 0em;}
div.chapter > div.titles {margin-top: 1.3em;margin-bottom: 1.3em;text-align: center;}
div.chapter > div.titles > div.title {width: 100%; display: inherit;text-align: center;margin-top: 1em;margin-bottom: 1em; font-size: 127%;}
div.section > div.titles {margin-top: 1em;margin-bottom: 1em; font-family:"AdobeCaslonProBold";}
div.section > div.titles > div.title {margin-top: 1em;margin-bottom: 1em;}
.chapter > div.section > div.titles > div.title {font-weight: bold;text-align: center; font-size: 127%;}
.figure {text-align: center;max-height: 100%;page-break-inside: avoid;}
.figure > img {margin-top: 0em;}
a.notecall {line-height: 0.7em;vertical-align: super;font-size: 0.7em; position: relative;top: 0px;}
div.noteentries {margin-top: 4em;padding-top: 1em;}
div.noteentries > div.noteentry {text-align: justify;margin-top: 0.4em;margin-bottom: 0.4em;font-family:"AdobeCaslonProRegular";}
div.noteentries > div.noteentry > a.notebackcall {margin-right: 0.5em;}
.span_theatre_stage_direction {font-size: 112%;font-style: italic;text-indent: 0em; font-family:"ACaslonPro-Italic";}
div.div_theatre_dialog {margin-top: 0.9em;margin-bottom: 0.9em;font-family:"AdobeCaslonProRegular";}
div.div_theatre_dialog > .div_title {text-align: center; font-size: 127%}
div.div_theatre_dialog > p {text-indent: 0em;}
div.div_theatre_stage_direction {margin-right: 5%;margin-left: 5%;padding: 0.3em;}
div.div_theatre_stage_direction > p {font-style: italic;text-indent: 0em;}
div.prepage_titlepage {display: block;text-align: center;}
div.prepage_titlepage > div.figure {display: block;text-align: center;}
div.prepage_titlepage div.figure > img {height: 100%;}
img {max-width: 100%;max-height: 100%;margin: 0px;}
p {text-align: justify;text-indent: 1em;margin-top: 0.4em;margin-bottom: 0.4em;}
div.div_introduction > p {font-size: 137%;text-indent: 0em;}
body div.div_theatre_characters_list {margin-left: 1em;}

body div.toc {margin-left: -1em;}

body div.div_theatre_characters_list > p {text-indent: 0em;}
body div.div_theatre_dialog {padding: 0.5em;}
body div.div_theatre_stage_direction {margin-right: 5%;margin-left: 5%;padding: 0em;}
body div.div_theatre_stage_direction > p {font-size: 112%;}
div.prepage > div.div > div.div_title {font-size: 171%;}
div.chapter > div.titles > div.title {font-size: 157%;text-align: center;margin-top: 1em;margin-bottom: 1em; font-family:"AdobeCaslonProRegular";}
body div.chapter > div.section > div.titles > div.title {margin-top: 1em;text-align: center;}
div.title {text-align: center;}
div.noteentries {border-top: 1px solid rgb(0,0,0);}
body {margin-top: 0px;margin-right: 5px;margin-bottom: 0px;margin-left: 5px;}
body.ilivri .span_theatre_stage_direction {font-size: 127%; color: black;}
body.ilivri div.div_theatre_stage_direction > p {font-size: 127%}
div.copyright_bookMainInfos {margin-bottom: 2em;}
div.prepage > div.div > div.div_title {color: rgb(0,128,128);}
#apropos p {text-indent: 1em;}
#noteAuLecteur {display: block;text-align: left;}
#noteAuLecteur p {text-indent: 1em;margin-bottom: 1em;}
#postpageCopyright {display: block;text-align: center;margin-top: 6.25em;}
#postpageCopyright p {margin-bottom: 1em;}
body.ilivri div.chapter > div.titles > div.title {color: rgb(0,128,128)}
div.section > div.titles > div.title {color: rgb(0,128,128)}
p {text-indent: 1em; font-family:"AdobeCaslonProRegular"; font-size:127%}
div.prepage > div.div > div.div_title-1 {width: 100%;text-align: center;margin-top: 1em; font-family:"AdobeCaslonProBold"; font-size:300%; margin-top:20%; color: rgb(0,128,128)}

@font-face {
font-family:"AdobeCaslonProBold";
src:url(../Fonts/AdobeCaslonProBold.ttf);
}

@font-face {
font-family:"ACaslonPro-Italic";
src:url(../Fonts/ACaslonPro-Italic.ttf);
}

@font-face {
font-family:"AdobeCaslonProBoldItalic";
src:url(../Fonts/AdobeCaslonProBoldItalic.ttf);
}

@font-face {
font-family:"AdobeCaslonProRegular";
src:url(../Fonts/AdobeCaslonProRegular.ttf);
}

Most likely wkhtmltopdf (which is internally used by PdfGenerator) cannot access these images, for some reason. You can handle "LogReceived" event to get wkhtmltopdf console log, this might help to get the reason of this. Or, you can convert your HTML file from the command line and see what is happening. — Vitaliy Fedorchenko, Feb 02 '18 at 06:42
i tried it var htmlToPdf = new NReco.PdfGenerator.HtmlToPdfConverter(); htmlToPdf.LogReceived += HtmlToPdf_LogReceived; but the problem is the event doesn't return any value. Did i missed something? — mecocopy, Feb 02 '18 at 06:48
@memocopy looks correct. Anyway it is good idea to test conversion from the command line. Normally wkhtmltopdf renders images without any problems. — Vitaliy Fedorchenko, Feb 02 '18 at 08:48
@VitaliyFedorchenko i also tried the command line. There is no error message shown. and the conversion output is still the same — mecocopy, Feb 04 '18 at 23:23

score 0 · Answer 1 · answered Feb 02 '18 at 07:07

0

I recommend you use itext PDF. I have used it in my Java API, i was able to create html file to pdf,

answered Feb 02 '18 at 07:07

Jay Hyber

321
1
4
18

Good day. i also tried it. But the problem is the font in the html is not similar to the pdf. Example in the Html. The font used is "Adobe Caslon Pro" in the PDF it renders font using Arial. But with Nreco. I don't have problem with font names. Or the font used – mecocopy Feb 05 '18 at 06:07
Have you set the font family in css? Can i see a snippet code? i also encountered this problem. – Jay Hyber Feb 05 '18 at 06:14
hello. I updated the question and put the code snippet. thank you – mecocopy Feb 05 '18 at 06:27
maybe it cant see this "src:url(../Fonts/AdobeCaslonProBold.ttf)" – Jay Hyber Feb 05 '18 at 07:09
Good day. I tried to check it but the path is correct. and even the name of the font – mecocopy Feb 05 '18 at 23:10

Jignesh Bhayani · Answer 2 · 2019-01-31T10:15:23.460

0

External resource should be with absolute (full) URL/Path.

edited Jan 31 '19 at 10:15

answered Feb 11 '18 at 06:12

Jignesh Bhayani

83
3

Html To PDF using Nreco wrong rendering

2 Answers2