Css is not working and pdf form got distorted while converting html to pdf

Aspose.PDF Product Family
1

I am able to make fields editable while converting html to pdf.

It works fine when I convert HTML-->pdf by doing "HTML to pdf" conversion by usind acrobat professional directly.

But the css does not work and form got distorted when We try to convert the html to pdf using Aspose.pdf.dll. The Product version is 2012.12.09. I am using the following code to do the same:

Aspose.Pdf.License license = new Aspose.Pdf.License();

license.SetLicense("Aspose.Pdf.lic");

StreamReader r1 = File.OpenText(@"D:/Test/Testhtml_pdf.html");

Aspose.Pdf.Generator.Text text2 = new Aspose.Pdf.Generator.Text(section, r1.ReadToEnd());

text2.IsHtmlTagSupported = true;

section.Paragraphs.Add(text2);

pdf.HtmlInfo.ImgUrl = "D:/Test/";

pdf.Save("D:/Test/test_parcs.pdf");v

2

Hi there,


Thanks for your inquiry. Can you please share your sample HTML + CSS source files here? So we will test the scenario at our end and will provide you more information accordingly.

We are sorry for the inconvenience faced.

Best Regards,
3

I have attached the file. Please check it

4

Hi,



html send in the above post. Please provide the solution.
5

Hi there,

Thank you for sharing source HTML. While testing the scenario with latest version of Aspose.Pdf for NET 8.4.0, I've managed to reproduce the issue and logged it in our bug tracking system as PDFNEWNET-35825 for further investigation and resolution. I've also linked your request to this issue and you will be notified via this thread as soon as it is resolved.

Please feel free to contact us for any further assistance.

Best Regards,

6

Hi,

Is this issue resolved now?

What We need to resolve it at our end?

Do We need to add latest aspose dll or Do We need to do some modifications in our code to get it resolved. Kindly advise.

Please respond asap

Regards,

Palak

7

Hi Palak,


Thanks for your inquiry. I’m afraid your reported is still not resolved as we have recently noticed the issue and its still pending for the investigation with other priority tasks. Please spare us little time we will keep you updated about the issue progress via this forum thread.

Thanks for your patience and cooperation.

Best Regards,
8

HI,

Can You please provide any update on this issue?

Regards,

Palak

9

Hi Palak,


We are sorry for the inconvenience, your reported issue is not resolved yet. We are unable to share any estimate at the moment as its investigation is pending and its in a queue with other priority tasks. As soon as its completed we will be in good position to share an ETA.

Best Regards,
10

The issues you have found earlier (filed as PDFNEWNET-35825) have been fixed in Aspose.Pdf for .NET 9.1.0.

For further details, you may check this blog post.

This message was posted using Notification2Forum from Downloads module by Aspose Notifier.
11

HI Palak,

Thanks for your patience. You may use new DOM approach for HTML to PDF conversion. Please try following code snippet, it will fix the issue.

HtmlLoadOptions options = new HtmlLoadOptions();<o:p></o:p>

// use the new conversion engine<o:p></o:p>

options.UseNewConversionEngine = true;<o:p></o:p>

// load HTML file<o:p></o:p>

Document pdfDocument = new Document(“Input.html”, options);

// save output as PDF format<o:p></o:p>

pdfDocument.Save(myDir + “Output.pdf”);

<o:p>
</o:p>

<o:p>Please feel free to contact us for any further assistance.</o:p>


Best Regards,

12

We have a similar issue where CSS is not being applied to the HTML, I even tried to use the HTMLLoadOptions for the baseURL but it still doesn’t work. The CSS actually is on the same server as our website containing all the converter code.

13

I have similar issue as the above post, the HTML is as below, when I try to convert the CSS doesnt get applied

<html>
<head>
    <title></title>
    <link href='http://10.100.169.225/css/pdfPrint.css' rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="formWrap left">
    <div class="formCont left">
        <h1>
            <img src="http://10.100.169.225/Content/images/IAA_logo.gif" /> Title Transmittal
        </h1>
        <div class="headerDate">
            Date: <strong>1/5/2024</strong>
        </div>
    </div>
        
    <div class="formCont left">
        <h4>General Information</h4>
        <fieldset class="col1 left">
            <label for="lblSalvageProviderName" class="txt_top">Provider:</label>
            <span class="valOnly">Commercial - Progressive Casualty Insurance Company</span>
            <br/>
            <label for="lblSalvageProviderAddress" class="txt_top">Address: </label>
            <span class="valOnly">6300 Wilson Mills Road E64 Mayfield Village, OH . 44143</span>
            <br/>
            <label for="lblAdjuster" class="txt_top">Adjuster:</label>
            <span class="valOnly">Trombley, Amanda</span>
        </fieldset>

        <fieldset class="col2 left">
            <label for="lblStockNo" class="txt_top">Stock # / Branch:</label>
            <span class="valOnly">35751789 / Little Rock</span>
            <br/>
            <label for="lblClaim1" class="txt_top">Claim #: </label>
            <span class="valOnly">1212121</span>
            <br/>
            <label for="lblPolicy" class="txt_top">Policy #: </label>
			<span class="valOnly">   </span>
        </fieldset>
    </div>
      
    <div class="formCont left">
        <h4>Vehicle Information</h4> 
        <fieldset class="col1 left">
            <label for="lblVIN" class="txt_top">VIN:</label>
            <span class="valOnly">5NPEC4AC5BH041176</span>
            <br/>
            <label for="lblYearMakeModel" class="txt_top">Year/Make/Model:</label>
            <span class="valOnly">2011 / HYUNDAI / SONATA</span>
            <br/>
            <label for="txtMileage" class="txt_top">Mileage:</label>
            <br />
            <label for="lblInsuredName" class="txt_top">Insured:</label>
            <span class="valOnly">Test</span>
            <br/>
            <label for="lblOwnerName" class="txt_top">Owner:</label>
            <span class="valOnly">Test</span>
        </fieldset>

        <fieldset class="col2 left">
            <label for="txtAcv">ACV $:</label>
            <br/>
            <label for="txtEstCostOfRepair">ECR $:</label>
            <br/>
            <label for="lblLossType" class="txt_top">Loss Type:</label>
            <span class="valOnly">Other</span>
            <br/>
            <label for="lblLossDate" class="txt_top">Date of Loss:</label>
            <span class="valOnly">01/02/2024</span>
            <br/>
        </fieldset>
    </div>

    <div class="formCont left">
        <h4>Document Information </h4>
        <fieldset class="col1 left">
            
            <label class="extended">Please process an application for a:</label>
            <div class="r_options">
            <label>Salvage Title / Certificate</label><br/>
            <label></label>
            </div>
            <br />
            <h4><font style="color: #000;">Enclosed Documents</font></h4>
            <div class="r_options">
            </div>
        </fieldset>

        <fieldset class="col2 left">
			<label>Application State:</label>
            <span class="valOnly">Arkansas
            </span>
                
            <label>Company Name:</label>
                <span class="valOnly">Commercial - Progressive Casualty Insurance Company</span>

            <label class="extended">Comments:</label>
            <div class="r_options">
            <label></label><br/>
           </div>
        </fieldset>
    </div>

    <div class="formCont left">
        <div class="col1 left">
            <h4><font style="color: #000;">Mail to:</font> Insurance Auto Auctions</h4>
            <div class="branchDetails">
                <span class="branchName">Title Center (LA)</span>
                <div id="BranchInfo">
                29000 S. Frost Road<br>
                Livingston, LA. 70754<br>
                855686781<br>
(225) 686-6197                    <span>Fax</span>
                </div>
            </div>
        </div>

        <div class="col2 left">
            <h4>Provider Contact</h4>
            <div class="providerInfo">
                <span class="name">Amanda Trombley</span><br>
                qaproviderservices@iaai.com<br>
                 
                
            </div>

            
        </div>
    </div>
</div>
<!--end of formWrap div-->
</body>
</html>
<p class="new-page"></p>
14

@skaushik

In such cases when your HTML has external CSS and resources, you need to make sure that the path to resources is specified in HtmlLoadOptions like below:

HtmlLoadOptions options = new HtmlLoadOptions("{path to resources}");

Please use above suggestion and let us know if issue still persists.

15

I tried to do that, still did not work, Then I copied the CSS inline in the HTML in head tag and when I heck the HTML just before conversion it is perfectly formatte dbut the PDF generated has formatting issues, specially with styles like display:inline-block etc. The version we use is 22.8 which is supposed to have resolution for css.

16

I pasted the HTML below, please try at your end once.


<html>
<head>
    <title></title>
    
</head>

<body>
    <div class="formWrap left">
    <div class="formCont left">
        <h1>
            <img src="http://10.100.169.225/Content/images/IAA_logo.gif" /> Title Transmittal
        </h1>
        <div class="headerDate">
            Date: <strong>1/11/2024</strong>
        </div>
    </div>
        
    <div class="formCont left">
        <h4>General Information</h4>
        <fieldset class="col1 left">
            <label for="lblSalvageProviderName" class="txt_top">Provider:</label>
            <span class="valOnly">Insurance Auto Auctions - Manchester</span>
            <br/>
            <label for="lblSalvageProviderAddress" class="txt_top">Address: </label>
            <span class="valOnly">75 Lowell Rd. Salem, NH . 03079</span>
            <br/>
            <label for="lblAdjuster" class="txt_top">Adjuster:</label>
            <span class="valOnly">Slensky, Ed</span>
        </fieldset>

        <fieldset class="col2 left">
            <label for="lblStockNo" class="txt_top">Stock # / Branch:</label>
            <span class="valOnly">35753212 / Phoenix</span>
            <br/>
            <label for="lblClaim1" class="txt_top">Claim #: </label>
            <span class="valOnly">23244224</span>
            <br/>
            <label for="lblPolicy" class="txt_top">Policy #: </label>
			<span class="valOnly">   </span>
        </fieldset>
    </div>
      
    <div class="formCont left">
        <h4>Vehicle Information</h4> 
        <fieldset class="col1 left">
            <label for="lblVIN" class="txt_top">VIN:</label>
            <span class="valOnly">1B7GG2AN9YS629756</span>
            <br/>
            <label for="lblYearMakeModel" class="txt_top">Year/Make/Model:</label>
            <span class="valOnly">2000 / DODGE / DAKOTA</span>
            <br/>
            <label for="txtMileage" class="txt_top">Mileage:</label>
            <br />
            <label for="lblInsuredName" class="txt_top">Insured:</label>
            <span class="valOnly">Test, Test</span>
            <br/>
            <label for="lblOwnerName" class="txt_top">Owner:</label>
            <span class="valOnly">Test, Test</span>
        </fieldset>

        <fieldset class="col2 left">
            <label for="txtAcv">ACV $:</label>
            <br/>
            <label for="txtEstCostOfRepair">ECR $:</label>
            <br/>
            <label for="lblLossType" class="txt_top">Loss Type:</label>
            <span class="valOnly">Other</span>
            <br/>
            <label for="lblLossDate" class="txt_top">Date of Loss:</label>
            <span class="valOnly">01/02/2024</span>
            <br/>
        </fieldset>
    </div>

    <div class="formCont left">
        <h4>Document Information </h4>
        <fieldset class="col1 left">
            
            <label class="extended">Please process an application for a:</label>
            <div class="r_options">
            <label>Salvage Title / Certificate</label><br/>
            <label></label>
            </div>
            <br />
            <h4><font style="color: #000;">Enclosed Documents</font></h4>
            <div class="r_options">
            </div>
        </fieldset>

        <fieldset class="col2 left">
			<label>Application State:</label>
            <span class="valOnly">Arizona
            </span>
                
            <label>Company Name:</label>
                <span class="valOnly">Insurance Auto Auctions - Manchester</span>

            <label class="extended">Comments:</label>
            <div class="r_options">
            <label></label><br/>
           </div>
        </fieldset>
    </div>

    <div class="formCont left">
        <div class="col1 left">
            <h4><font style="color: #000;">Mail to:</font> Insurance Auto Auctions</h4>
            <div class="branchDetails">
                <span class="branchName">Title Center (AZ)</span>
                <div id="BranchInfo">
                2299 West Broadway Road<br>
                Phoenix, AZ. 85041<br>
                (855) 686-7813<br>
(602) 305-5360                    <span>Fax</span>
                </div>
            </div>
        </div>

        <div class="col2 left">
            <h4>Provider Contact</h4>
            <div class="providerInfo">
                <span class="name">Ed Slensky</span><br>
                qaproviderservices@iaai.com<br>
                9898379674 
                    <span>  Ext. 123</span>
                
            </div>

            
        </div>
    </div>
</div>
<!--end of formWrap div-->
</body>
</html>
<p class="new-page"></p><style> body {background: #FFF; margin: 0; font-family: Arial, Tahoma; text-rendering: optimizeLegibility; font-size: 100%; color: #333;} h1, h2, h3, h4, h5, h6 {margin: 0; text-shadow:1px 1px 1px rgba(0,0,0,.10)} h1 {font-size: 1.125em;} h2 {font-size: 1em;} h3 {font-size: 0.875em;} h4 {font-size: 0.813em;} h5 {font-size: 0.688em;} h6 {font-size: 0.625em;} p, ul, blockquote, pre, td, th, label {margin: 0; font-size: 68.8%; line-height: 1em;} table {border-collapse: collapse; border-spacing: 0;} fieldset{border: 0 none; padding: 0;} a {color: #a70000; outline: none; text-decoration: none;} .clear{clear: both;} .header{display: block; position: relative; height: 3.5em; background: #FFF; border-bottom: 1px solid #CCC; width: 100%;} .logo{height:50px; width: 160px; position: absolute; top: 1%; left: 1%;} .pgTitle{position: absolute; top: 0.4em; left: 8em; font-weight: bold; text-shadow: 1px 1px 1px #FFF; font-size: 1.5em;} .printDate{position: absolute; top: 5px; right: 1%; width: 450px; text-align: right; font-size: 10px; color: #666;} .pgWrapPrint{display: block; width: 100%; margin: 0 auto; min-width: 100%; padding: 1% 0;} .std-grid{margin-right: 1%; margin-left: 1%;} .std-grid th, .std-grid td{text-align: left;} .std-grid th {border-bottom: 0.1em solid #333; color: #000; padding: 0.3em; vertical-align: bottom;} .std-grid th:first-child{border-left: 0em;} .std-grid th, .std-grid th a{font-size: 10px; text-decoration: none;} .std-grid tr td {border-bottom: 0.1em solid #CCC; padding: 0.3em; vertical-align: top;} .std-grid .txtC{text-align: center;} .std-grid .txtR{text-align: right;} .vehDetInfo{margin: 0 2%;} .detailHeader{border-bottom: 1px solid #CCC; padding: 0.4em 2%; position: relative;} .detailHeader .item{font-size: 0.667em; font-weight: normal; line-height: 1.5em; display: block;} .detailHeader .ymm{margin-top: 0.2em; min-height:16px;} .primaryDetails{margin: 0.5em 0;} .primaryDetails .mainImg{width: 124px; float: left; margin-right: 0.5em;} .primaryDetails .imgCont{height: 93px; background: #999;} .primaryDetails .g2{width: 46%; display: inline; float: left; margin: 0 1%;} .primaryDetails .branchBidCont{overflow-y: hidden;} .branchBidCont .branchInfo{text-align: center; padding: 0.2em 0; border-bottom: 1px solid #CCC; font-size: 0.75em; margin-bottom: 0.5em;} .branchBidCont .col{text-align: center; color: #666; float: left; width: 25%;} .branchBidCont .col label{font-size: 0.688em; text-transform: uppercase; font-weight: bold;} .branchBidCont .col h2{color: #333; font-size: 95%;} .branchBidCont .col .percAcv{font-weight: normal;} .branchBidCont .col .percAcv span{font-size: 90%; margin-left: 0.3em;} .branchBidCont .lastcounter{width: 100%; float: left; text-align: center; margin-top: 0.5em} .branchBidCont .lastcounter label{text-transform: uppercase; font-weight: bold; color: #666; font-size: 0.688em;} .branchBidCont .lastcounter p{font-weight: bold; margin: 0;} .actionCont{position: relative; margin-top: 1em; margin-bottom: 1em;} .actionCont .b2{width: 96%; display: block; margin: 0 1% 0.5em 1%;} .actionCont .action_ind h3{text-align: center; padding: 0.5em} .actionCont .action_ind h3 .sp-ic{margin-right: 0.3em;} .action_ind .action_ind h3 .acvPerc{font-size: 0.75em;} .action_ind .finaloffer{background: #e69b29; color: #FFF; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);} .action_ind .countersent{background: #238723; color: #FFF; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);} .action_ind .buyercounter{background: #e8e8e8; color: #c90107; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);} .action_ind .countersent .acvPerc, .action_ind .buyercounter .acvPerc{font-weight: normal; font-size: 0.75em; text-shadow: none;} .action_ind p{text-align: center; padding: 0.3em; color: #000; margin: 0;} .action_ind .subMsg{padding: 1em 0;} .primaryDetails .subInfoCont{margin-bottom: 0.5em;} .primaryDetails .subInfoCont h4{background: #e8e8e8; padding: 0.5em; color: #000; text-shadow: 1px 1px 0 #FFF;} .primaryDetails .subInfoCont .sectionInfo{padding: 0.3em 0; margin-bottom: 0.3em; height: 18em; overflow-y: hidden;} .subInfoCont .sectionInfo .histDateAmt{font-size: 0.75em; font-weight: bold; color: #000; padding: 0.2em 0.5em;} .sectionInfo .rerunTag{display: inline; font-size: 0.75em; color: #666; padding-left: 0.5em;} .sectionInfo .rerunTag .sp-ic{margin-right: 0.5em; vertical-align: text-bottom;} .sectionInfo .bidHistory{margin-top: 0.3em; padding: 0.5em; height: 12em; border-top: 1px solid #CCC;} .sectionInfo .bidHistory span{font-size: 0.688em; margin-right: 0.7em;} .subInfoCont .infoLists label, .subInfoCont .infoLists span{display: block; float: left; vertical-align: top; font-size: 0.75em; margin-top: 0.5em;} .subInfoCont .infoLists span a{text-decoration: underline;} .subInfoCont .infoLists label{margin-right: 1.5%; color: #666; width: 30%; text-align: right;} .subInfoCont .infoLists span{width: 65%;} .primaryDetails .subInfoCont h2 .ic-mv{vertical-align: middle; margin-right: 1em;} .primaryDetails .subInfoCont .result_base{margin: 0; padding: 0.7em; line-height: 1em;} .subInfoCont .sectionInfo .mvCriteria{font-size: 0.75em; padding: 0.3em 0.7em;} .subInfoCont .resultBrkDn{border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; padding: 0.3em 0.7em;} .subInfoCont .resultBrkDn p{margin-bottom: 0.5em; font-size: 0.75em; line-height: 2em;} .subInfoCont .resultBrkDn p span, .subInfoCont .resultBrkDn p label{font-size: 1em;} .subInfoCont .resultBrkDn label{color: #666; margin-right: 0.3em;} .subInfoCont .resultBrkDn span{font-weight: bold; margin-right: 0.3em;} .subInfoCont .resultBrkDn .noresults{display: block; padding: 0.3em; font-size: 0.75em; line-height: 1.3em;} .primaryDetails .subInfoCont .noteText{display: block; color: #666; padding: 0.3em 0.7em; font-size: 0.688em; font-style: italic;} .FourColWrap .col{width: 23%; margin-right: 1%; margin-left: 1%; display: inline; float: left;} .FourColWrap .col h2{color: #a70000; padding: 0.3em 0; text-indent: 4%; margin-bottom: 0.5em; border-bottom: 0.15em solid #999; } .FourColWrap .col h2 span{display: block; height: 1em; padding: 0.4em 3% 0.6em; margin: -0.35em 0.2em 0 0; float: right; width: 30%; text-align: right;} .rcont{display: block; font-size: 13px; font-weight: bold;} .subCat{font-size: 12px; font-weight: normal; padding: 0 0 0 5%; background: #f5f5f5;} .r2cont{border:1px solid #CCC; margin-bottom: 0.5em; display: block; font-size: 13px; font-weight: bold;} .rcont .name, .rcont .count{display: inline-block; margin: 1% 2.5%;} .r2cont .name, .r2cont .count{display: inline-block; margin: 2% 2.5%;} .rcont .name, .r2cont .name{width: 70%; overflow: hidden; text-overflow: ellipsis;} .rcont .count, .r2cont .count{width: 16%; text-align: right; vertical-align: top;} .printRefinersWrap{padding: 0 1%; width: 98%;} .refCategory{padding: 0.25em 0; border-bottom: 1px solid #e8e8e8; float: left; width: 98%;} .refCategory .refTitle{float: left; width: 10%; margin-right: 2%; font-size: 0.688em; font-weight: bold; color: #666;} .refCategory .refSelValues{float: left; width: 85%; font-size: 0.688em; text-transform: uppercase;} .formWrap{max-width: 850px; height:auto; position: relative; margin: 0 auto;} .formWrap .formCont{padding: 10px 0; border-bottom: 1px solid #e8e8e8; clear: both; width: 100%; float: left; margin: 0 15px;} .formCont h1{color: #333; font-size: 1.75em;} .formCont h1 img{vertical-align: middle; margin: 0 30px 0 10px;} .formCont .overview{font-size: 11px; color: #666; line-height: 16px; padding: 5px 0;} .formCont .headerDate{position: absolute; top: 0; right: 0; width: 8em; text-align: right; padding: 10px 15px 0 0; color: #666; font-size: 0.75em;} .formCont .reqTxt{color: red; font-weight: bold;} .formCont .subTxt{color: #666; font-size: 11px; font-weight: normal;} .formCont h4{color: #a70000; padding-bottom: 10px; font-size: 1.25em} .formCont fieldset{position: relative;} .formCont .col1, .formCont .col2{width: auto; display: inline-block;} .formCont .col1{margin-right: 5%;} .formCont fieldset label{width: 9em; color: #666; display: inline-block; margin: 0 0.6em 1.25em 0; font-size: 1em;} .formCont fieldset > span{display: *inline-block;} .formCont fieldset label span{font-size: 11px; color: #999;} .formCont fieldset .valOnly{display: inline-block; width: 15em;} .formCont fieldset .smLbl{width: 25px; padding-left: 10px;} .formCont fieldset .extended{width: 100%; margin: 0 0 3px 0;} .formCont fieldset .extended .req{display: inline; position: static;} .formCont fieldset .r_options{padding-bottom: 16px;} .formCont fieldset .r_options label{display: inline; color: #000; margin-right: 15px; line-height: 1.5em;} .formCont fieldset .txt_top{vertical-align: top;} .formCont .fullWidth{width: 95%;} .formCont .optionInfo{padding-left: 2em; color: #666;} .formCont .mailtoHeader{color: #333;} .formCont .mailtoHeader label{width: 105px; display: inline-block;} .formCont .branchList{font-weight: bold; width: 90%;} .formCont .branchDetails, .formCont .providerInfo{width: 320px; margin-right: 30px; padding-left: 0.5em;} .formCont .branchDetails .branchName, .formCont .providerInfo .name{font-weight: bold;} .formCont .emailOptions{margin-top: 0.5em; color: #333;} thead {display: table-header-group; } tr, img {page-break-inside: avoid; } img {max-width: 100% !important; } @page {margin: 0.5cm} .ace-logo{ width:15rem; } .payment-amount { border: 2px solid #000; padding: 10px; } .print-title{ color:red; } .ml-75 { margin-left: 7.5rem !important; } .mr-100 { margin-right: 10rem !important; } .ml-150 { margin-left: 15rem !important; } body{ overflow:hidden!important; } #aspnetForm { display: none !important; } </style>
17

The PDF is generated but not the same format as the HTML. The columns are not taking “display: inline-block;” and probably some other style tags too, and they are wrapping up

HTML format(correct):
image.png (15.8 KB)

PDF format(incorrect):

image.png (42.5 KB)

18

@skaushik

We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): PDFNET-56295

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

19

Any updates?

20

Is this issue resolved now?.
.