I have a html content which is taking the complete width of page but in PDF it is taking only 50% width

Hi Team,

I have a html content which has 100% width and covering the whole screen but when i render the same content in PDF it is just taking 50% width.

HtmlLoadOptions objLoadOptions = new HtmlLoadOptions();
objLoadOptions.PageInfo.IsLandscape = true;
MemoryStream memoryStream = new MemoryStream(Encoding.UTF8.GetBytes(htmlString));
            Aspose.Pdf.Document doc = new Aspose.Pdf.Document(memoryStream, objLoadOptions);
memoryStream.Dispose();

            doc.ProcessParagraphs();

            double w, h = 0;

            foreach (Page page in doc.Pages)
            {
                w = page.Rect.Width;
                h = page.Rect.Height;
                page.MediaBox = new Rectangle(0, 0, h * h / w, h);
                page.CropBox = new Rectangle(0, 0, h * h / w, h);
            }

this is the aspose logic i have written and this is the html content

<body style="margin: 0">

<div>

<table style="table-layout: auto; width: 100%;text-align: left;font-family:Arial, Helvetica, sans-serif">
</table>
</div>
</body

can you please let me know what needs to be changed in this to make the pdf width to 100%

@adithya_sai

Thanks for contacting support.

The width of content in output PDF may not capture 100% area due to margins. API adds margins of 72 points around the page by default while generating PDF. You can remove margins by using following code snippet:

objLoadOptions.PageInfo.Margin = new MarginInfo(0, 0, 0, 0);

We hope this will resolve your issue. In case you still face any issue, please share complete HTML content with us along with output PDF. We will test the scenario in our environment and address it accordingly.

@asad.ali

Thanks for the the reply. This still did not solve my issue.
This is the complete code with html content that i am using

  HtmlLoadOptions objLoadOptions = new HtmlLoadOptions();
            objLoadOptions.PageInfo.Margin = new MarginInfo(0, 0, 0, 0);
            objLoadOptions.PageInfo.IsLandscape = true;
            MemoryStream memoryStream = new MemoryStream(Encoding.UTF8.GetBytes(htmlString));
            Aspose.Pdf.Document doc = new Aspose.Pdf.Document(memoryStream, objLoadOptions);
            memoryStream.Dispose();

            doc.ProcessParagraphs();

            double w, h = 0;

            foreach (Page page in doc.Pages)
            {
                w = page.Rect.Width;
                h = page.Rect.Height;
                page.MediaBox = new Rectangle(0, 0, h * h / w, h);
                page.CropBox = new Rectangle(0, 0, h * h / w, h);
            }

            MemoryStream outputStream = new MemoryStream();
            doc.Save(outputStream, SaveFormat.Pdf);
            return new FileStreamResult(outputStream, "application/pdf");

this is the html content

<!DOCTYPE html>
<html lang="en" style="margin: 0">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Report</title>
</head>
<body style="margin: 0">
    <div>
        <table style="table-layout: auto; width: 100%;text-align: left;font-family:Arial, Helvetica, sans-serif">
            <thead style="background: #EFEFEF">
                <tr>
                    <th style="height: 70px;font-weight: 400;padding: 0 40px;">
                        <table style="width: 100%;">
                            <tr>
                                <td>
                                    <div style="color: #2c2c2c;font-size: 18px;font-weight: 700;">Report ID:dummy</div>
                                    <div style="color:#0575D1;font-size:12px;">12 July 2019</div>
                                </td>
                                <td style="color:#666666;font-size: 16px;text-align: right">
                                    <span style="font-weight:700">dummy</span>
                                    <span>dummy dummy</span>
                                </td>
                            </tr>
                        </table>                       
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="padding: 40px;">
                        <div>
                            <div>
                                <h1 style="margin-bottom:0;font-size:22px;color:#4B4B4B;line-height: 20px;text-transform: capitalize;border-bottom: 1px solid #cccccc;padding-bottom: 15px;">Test heading</h1>
                                <div style="padding: 40px 0;">
                                    <table style="table-layout: fixed;width:100%;">
                                        <caption style="color:#0575D1;font-size: 15px;line-height: 20px;font-weight: bold;text-align: left;padding-bottom: 15px;">super Data</caption>
                                        <tr>
                                            <td>
                                                <table style="table-layout: auto;width:100%;font-size: 14px;border-collapse: collapse;color:#424342">                                                       
                                                   
                                                    <tbody>
                                                        <tr>
                                                            <td  style="padding-bottom:20px;">
                                                                <label style="color:#919191; line-height:20px;">dummy</label>
                                                                <div style="line-height: 20px;">dummy</div>
                                                            </td>
                                                            <td  style="padding-bottom:20px;">
                                                                <label style="color:#919191;line-height: 20px;">dummy</label>
                                                                <div style="line-height: 20px;">dummy.raw</div>
                                                            </td>                                                           
                                                        </tr>
                                                        <tr>
                                                            <td  style="padding-bottom:20px;">
                                                                <label style="color:#919191;line-height: 20px;">dummy</label>
                                                                <div style="line-height: 20px;">dummy</div>
                                                            </td>
                                                            <td  style="padding-bottom:20px;">
                                                                <label style="color:#919191;line-height: 20px;">dummy(dummy)</label>
                                                                <div>dummy</div>
                                                            </td>    
                                                            <td  style="padding-bottom:20px;">
                                                                <label style="color:#919191;line-height: 20px;">dummy dummy</label>
                                                                <div style="line-height: 20px;">dummy</div>
                                                            </td>                                                               
                                                        </tr>
                                                        <tr>
                                                            <td  style="padding-bottom:20px;">
                                                                <label style="color:#919191;line-height: 20px;">dummy</label>
                                                                <div style="line-height: 20px;">dummy</div>
                                                            </td>
                                                            <td  style="padding-bottom:20px;">
                                                                <label style="color:#919191;line-height: 20px;">dummy</label>
                                                                <div style="line-height: 20px;">dummy</div>
                                                            </td>   
                                                            <td  style="padding-bottom:20px;">
                                                                <label style="color:#919191;line-height: 20px;">dummy</label>
                                                                <div style="line-height: 20px;">dummy</div>
                                                            </td>     
                                                        </tr>                                                        
                                                    </tbody>
                                                </table>
                                            </td>
                                            <td>
                                                <img src="">
                                            </td>
                                        </tr>
                                    </table>                                   
                                </div>
                                
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr><td style="background: #919191;height: 20px;"></td></tr>
            </tfoot>
        </table>
    </div>
</body>
</html>

please help me in resolving this

@adithya_sai

Please check following modified code snippet along with generated output.

HtmlLoadOptions objLoadOptions = new HtmlLoadOptions();
objLoadOptions.PageInfo.Margin = new MarginInfo(0, 0, 0, 0);
objLoadOptions.PageInfo.IsLandscape = true;
Aspose.Pdf.Document doc = new Aspose.Pdf.Document(dataDir + "testing.html", objLoadOptions);
doc.Save(dataDir + "htmltopdf.pdf");

htmltopdf.pdf (60.1 KB)

Please use above shared code snippet in order to generate desired PDF document. In case you face any issue, please feel free to let us know.

Hi @asad.ali ,

Thanks for the reply. can you please tell me what ‘datadir’ means? and also i have to return back the memory stream to the calling function and there i will save that memory stream to my storage location. Can you please tell me what is missing in the code that i have written or can you please try to modify the same code that i have written (because the content of the document may have multiple pages and that is dynamic). would be great if you can tell me how to return back the memory stream back in the same way that i have sent.

@asad.ali
i am waiting for your response. This is stopping us from deployment.

@adithya_sai

If HTML content is using some resources e.g. images or files which are located somewhere, you can specify there full path in HtmlLoadOption(). In your case, it is not necessary so you can use HtmlLoadOptions with default/empty constructor.

You can definitely use memory stream as per your requirements. You need to remove only following code lines from your code snippet which you were using to set MediaBox. Due to which extra white space was adding in the PDF.

double w, h = 0;

            foreach (Page page in doc.Pages)
            {
                w = page.Rect.Width;
                h = page.Rect.Height;
                page.MediaBox = new Rectangle(0, 0, h * h / w, h);
                page.CropBox = new Rectangle(0, 0, h * h / w, h);
            }

Please try after removing above code snippet from the code which you had shared earlier. In case you still face any issue, please feel free to let us know.

Thank you soo much that actually worked :slight_smile:

@adithya_sai

It is good to know that your issue has been resolved by using suggested approach. Please keep using our API and in case you need further assistance, please feel free to let us know.

HI @asad.ali ,

Hope you are doing well, we are also facing the same issue but I tried to use your suggestion for “PageInfo” but in Aspose.PDF for java in 20.2 object is not available so to resolve this width issue in generated PDF what we require to do.
Can you please suggest.

Thanks and Regards,
Subrata

@subratamettle

The PageInfo Class is present in Aspose.PDF for Java 20.2 as well as latest version. You may access it by calling Page.getPageInfo() method.

Thanks @asad.ali for your quick response but how we can resolved in 20.2 for this 50% width issue in generated PDF.

@subratamettle

Would you kindly share some sample HTML file and output PDF document to show the issue that you are facing actually. We will test the scenario in our environment and share our feedback accordingly.

PDFs.zip (282.6 KB)
@asad.ali PFA, respective HTML file along with the generated PDF is also present.

@subratamettle

Thanks for sharing sample files.

You may please increase page width/height and decrease margins in order to get better output:

HtmlLoadOptions options = new HtmlLoadOptions(dataDir);
options.getPageInfo().setWidth(1800); // in points 72pt = 1 inch
options.getPageInfo().setHeight(2000); // in points 72pt = 1 inch
options.getPageInfo().setMargin(new MarginInfo(0,0,0,0));
Document doc = new Document(dataDir + "KPMG-and-Flexera-test.html", options);
doc.save(dataDir + "HTMLtoPDF_20.4.pdf");

HTMLtoPDF_20.4.pdf (239.1 KB)

Hi @asad.ali,

Thanks and lots :blush: I am playing now with Width and Height and margin for making it good.
I have one query in PDF how we can add page footer Content irrespective of the Page count in PDF, as we don’t know in some cases it would be single page in one cases it could be 2 pages and more, in all of this if i wanted to add footer content in the pdf how we can do that.

Thanks and regards,
Subrata

@subratamettle

Thanks for your feedback.

You can iterate through pages of the generated PDF (After it is generated from HTML) and add text stamps at the bottom of each page as per your requirements. Please visit following documentation article for more details:

Sorry for late response.

Thanks @asad.ali for your reference but it’s showing if it’s a simple text then we can do that what it’s stated , but suppose that footer having image with some specific style then how we can archive this .

PFA attachment of the HTML file without footer and generated PDF with image folder.

below is the code snippet we are using now

===============
// Specify the The base path/url for the html file which serves as images database
String basePath = “E:\PDFs\PDFs_view\PDFs\” ;
HtmlLoadOptions htmloptions = new HtmlLoadOptions(basePath);

	// set MarginInfo for margin details
	htmloptions.getPageInfo().setWidth(650); // in points 72pt = 1 inch
	htmloptions.getPageInfo().setHeight(1200); // in points 72pt = 1 inch
	htmloptions.getPageInfo().setMargin(new MarginInfo(20,20,20,20));
			
	// Load HTML file
	Document doc = new Document(basePath + "KPMG-and-Flexera-Withoutfooter.html", htmloptions);
	
	
	
	// Save HTML file
	doc.save(basePath+"KPMG-and-Flexera-Withoutfooter650-1200_mr20.pdf");
	System.out.println("PDF Genertion done");

===============

**PDFs_Footer.zip (268.0 KB)
** below is the content which I wanted to append in every Page footer, how we can achive this.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++

FooterText.zip (822 Bytes)

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

@subratamettle

Please use following complete code snippet to achieve your requirements:

HtmlLoadOptions htmloptions = new HtmlLoadOptions(dataDir);
// set MarginInfo for margin details
htmloptions.getPageInfo().setWidth(700); // in points 72pt = 1 inch
htmloptions.getPageInfo().setHeight(1250); // in points 72pt = 1 inch
htmloptions.getPageInfo().setMargin(new MarginInfo(20,50,20,20));
// Load HTML file
Document doc = new Document(dataDir + "KPMG-and-Flexera-Withoutfooter.html", htmloptions);

// Save HTML file
doc.save(dataDir+"KPMG-and-Flexera-Withoutfooter700-1250_mr20.pdf");

Document document = new Document(dataDir + "KPMG-and-Flexera-Withoutfooter700-1250_mr20.pdf");
HtmlFragment htmlContent =
                new HtmlFragment("<div style=\"position: relative;\">\n" +
                        "        <div id='footerimage' style=\"position: absolute; top: 20px;\">\n" +
                        "            <img src='content/dam/KPMG-service-guide/pdfIcons/klogo.png' style=\"width: 50px;\" />\n" +
                        "        </div>\n" +
                        "        <div id='footerDiv' style=\"font-size: 12px; position: absolute; left: 5%; top: 0;\">\n" +
                        "            <p style=\"text-align: left !important;\">© 2018 KPMG International Cooperative (&quot;KPMG\n" +
                        "                International&quot;), a Swiss entity. Member firms of the KPMG network of independent firms are\n" +
                        "                affiliated with KPMG International. KPMG International provides no client services. No member firm has\n" +
                        "                any authority to obligate or bind KPMG International or any other member firm vis-à-vis third parties,\n" +
                        "                nor does KPMG International have any such authority to obligate or bind any member firm. All rights\n" +
                        "                reserved. Use of this system is governed by <a\n" +
                        "                    href=\"google.com\" title=\"KPMG\">KPMG's\n" +
                        "                    Intranet Usage Policy</a>.</p>\n" +
                        "            <p style=\"text-align: left !important;\">The Services Site does not include a comprehensive listing of all\n" +
                        "                firm services. Therefore, other services, not listed, may be appropriate for certain client issues. <b\n" +
                        "                    style=\"color: #00338d;\">The Services Site content is for internal use only and cannot be distributed\n" +
                        "                    outside of the firm</b>.</p>\n" +
                        "        </div>\n" +
                        "    </div>");
htmlContent.setHtmlLoadOptions(new HtmlLoadOptions(dataDir));
HeaderFooter footer = null;
for (Page page : document.getPages())
{
  footer = new HeaderFooter();
  footer.getParagraphs().add(htmlContent);
  footer.setMargin(new MarginInfo(0,0,0,20));
  page.setFooter(footer);
}
document.save(dataDir + "output.pdf");

output.pdf (418.2 KB)

Thanks @asad.ali I have implemented the code it’s working for me also.
but thing is second paragraph is not printed in the generated PDF in footer section, I am also not able to download the pdf output which you have attached in the response , it’s giving me “Sorry, this file is private. Only visible to topic owner and staff members.” error.