How to wrap images in aspose.pdf when converting html to pdf for .NET

Aspose.PDF Product Family
1

I put my covert method below .I want to wrap my images. could you please help me??

expected Output wrapping.PNG (128.0 KB) Is this possible with aspose.pdf??

public List<byte[]> Convert(ContentsDto content, IDictionary<string, string> options, Func<DependentContent, Task<ContentsDto>> GetDependency = null)
    {

        var pdfBytearray = new List<byte[]>();
        License htmlLicense = new License();
        //htmlLicense.SetLicense("Aspose.HTML.NET.lic");
        //Manipulate html document 
        
        HtmlLoadOptions htmlLoadOptions = new HtmlLoadOptions() { CustomLoaderOfExternalResources = Invoke, HtmlMediaType = HtmlMediaType.Print };
        
        using (var streamProvider = new MemoryStream(content.Data))
        {
            //convert html to pdf
            
            Document pdfDocument = new Document(streamProvider, htmlLoadOptions);

            //convert pdf to pptx 
            PptxSaveOptions pptx_save = new PptxSaveOptions();
            using (var pptxStream = new MemoryStream())
            {
                pdfDocument.Save(pptxStream, pptx_save);
                pptxStream.Seek(0, System.IO.SeekOrigin.Begin);
                pdfBytearray.Add(pptxStream.ToArray());
            }
        }


        return pdfBytearray;
    }
2

@nethmi

Would you kindly share your sample HTML in .zip format with us? We will test the scenario in our environment and address it accordingly.

3

This is my HTML documentHTML.zip (2.9 KB)

this is expected outputwrapping.PNG (128.0 KB)

4

@nethmi

It looks like you have not shared the HTML with its complete resources. We rendered it in a browser and noticed that the images were not showing in a way they are placed in the image of expected output. Can you please share the HTML with complete resources that can render same as your expected output in PDF?

5

Please refere the code which I implemented using ASPOSE.WORDS below.I want to do same by using ASPOSE.PDF

Document doc = new Document(@“C:\Temp\in.html”);
NodeCollection shapes = doc.GetChildNodes(NodeType.Shape, true);
foreach (Shape s in shapes)
{
s.WrapType = WrapType.Square;
s.Top += s.Height + 10;
}
doc.Save(@“C:\Temp\out.docx”);

current outcome current.PNG (138.9 KB)
I want to wrap those images like this when converting it to the pdf expected.PNG (128.0 KB)

6

Do you know how to do this with aspose.pdf.???

Document doc = new Document(@"C:\Temp\in.html");
NodeCollection shapes = doc.GetChildNodes(NodeType.Shape, true);
foreach (Shape s in shapes)
{
    s.WrapType = WrapType.Square;
    s.Top += s.Height + 10;
}
doc.Save(@"C:\Temp\out.docx");
7

@nethmi Your question is related to Aspose.PDF. So I moved it to the appropriate forum. My colleagues will reply you shortly.

1 Like
8

@nethmi

Regretfully, Aspose.PDF does not offer wrapping images during HTML to PDF Conversion. Instead, it honors the styling of images and other content in the HTML according to the CSS defined for source HTML. You can wrap images in HTML using CSS and then supply the HTML to the API to generate PDF as per your needs.

1 Like
9

Hii
can I do this(image wrapping) by using Aspose.HTML???

10

@nethmi

We are responding to your similar inquiry in respective forum thread.

12

Hiii

In here I am using css to wrap images. Now I am getting an issue.

my expected outcome is expectedOutcome.PNG.jpg (304.6 KB)
current outcome is CurrentOutput.PNG.jpg (242.2 KB)

my html HTML.zip (2.9 KB)
please use your own images

//this is my convert method

  public List<byte[]> Convert(ContentsDto content, IDictionary<string, string> options, Func<DependentContent, Task<ContentsDto>> GetDependency = null)
    {
        License htmlLicense = new License();
        htmlLicense.SetLicense("Aspose.Total.NET.lic");
        var pdfBytearray = new List<byte[]>();
        
        HtmlLoadOptions htmlLoadOptions = new HtmlLoadOptions() { CustomLoaderOfExternalResources = ResourceLoading, HtmlMediaType = HtmlMediaType.Print };
        htmlLoadOptions.PageInfo.Margin.Left = 50;
        htmlLoadOptions.PageInfo.Margin.Right = 50;
        htmlLoadOptions.PageInfo.Margin.Top = 50;
        htmlLoadOptions.PageInfo.Margin.Bottom = 50;
        htmlLoadOptions.PageInfo.Width = Aspose.Pdf.PageSize.A4.Width;
        htmlLoadOptions.PageInfo.Height = Aspose.Pdf.PageSize.A4.Height;
        htmlLoadOptions.PageInfo.Width = 959.976;
        htmlLoadOptions.PageInfo.Height = 540;
        

        //Manipulate html document 
        HtmlDocument htmlDocument = new HtmlDocument();
        using (var htmlStream = new MemoryStream(content.Data))
        {
            htmlDocument.Load(htmlStream);    
      
            AddFroalaCSSSupport(htmlDocument);
         
            foreach (HtmlNode p in htmlDocument.DocumentNode.SelectNodes("//p"))
            {
                if (p.ChildNodes.Count == 1 && p.InnerHtml== "<br>")
                {
                    p.Remove();
                }
            }
                  
        }
        using (var htmlOutputStream = new MemoryStream())
        {
            //convert html to pdf
            htmlDocument.Save(htmlOutputStream);
            htmlOutputStream.Seek(0, System.IO.SeekOrigin.Begin);
            Document pdfDocument = new Document(htmlOutputStream, htmlLoadOptions);
                                    
            //convert pdf to pptx
            PptxSaveOptions pptx_save = new PptxSaveOptions();
           
            using (var pptxStream = new MemoryStream())
            {
                pdfDocument.Save(pptxStream, pptx_save);
                pptxStream.Seek(0, System.IO.SeekOrigin.Begin);
                pdfBytearray.Add(pptxStream.ToArray());
            }
        }
        return pdfBytearray;
    }

//this is my added css method

  private static void AddFroalaCSSSupport(HtmlDocument htmlDocument)
    {
        var linknode = htmlDocument.CreateElement("link");
        linknode.SetAttributeValue("href", "https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.6/css/froala_editor.pkgd.min.css");
        linknode.SetAttributeValue("rel", "stylesheet");
        var htmlHead = htmlDocument.DocumentNode.SelectSingleNode("//head");
        htmlHead.AppendChild(linknode);

        //TODO : add this node from GE and remove this code
        var bodyNode = htmlDocument.DocumentNode.SelectSingleNode("//body");
        var bodyContent = bodyNode.InnerHtml;
        var newBody = $"<div class=\"fr-view\">{bodyContent}</div>";
        bodyNode.InnerHtml = newBody;
    }

Do you have any solution to get that expected outcome???

In here HtmlDocument means HTML agility pack. we load our content(html) to that agility pack.
So HtmlNode,DocumentNode are it’s methods.

from AddFroalaCSSSupport() this method I am create a link node to put the css link as href .

this is my style sheet https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.6/css/froala_editor.pkgd.min.css

from this style sheet, we are wrapping images which has class=“fr-fil” (class=“fr-fic fr-dii fr-fil”)

13

@nethmi

We were able to produce the expected output using Aspose.HTML for .NET. We responded to your original inquiry in the respective forum thread in Aspose.HTML Category where you can please check the code snippet and the attached output PDF document.

14

no no this question is from aspose.pdf

15

for this one

16

@nethmi

Can you please share which namespace is required to access the HtmlDocument that you are using in your code? Also, if you can use Aspose.HTML as well, you can just edit the inline CSS (as we showed in Aspose.HTML thread), and use the obtained HTML file to convert into PDF using Aspose.PDF.

17

Aspose.pdf. Here I am using aspose.pdf

18

In case you are only using Aspose.PDF, please share the HTML file (in .zip format) that has been obtained after performing the above step. Please save the HTML file into a directory instead of Stream at your end and share that with us.

19

I replied to this one. we are using aspose.pdf to convert html to pdf and pdf to pptx.

you asked to use style sheet to wrap images

20

@nethmi

Yes, because Aspose.PDF cannot edit or update the HTML file or its CSS. We can see in your code that you are editing the CSS styling. However, we were unable to run the code snippet because of unknow Class Types i.e. HtmlDocument, HtmlNode, etc. We must be missing some dependency or library. Can you please specify it? OR just share the HTML file obtained after editing the CSS at your end.

21

Actually we have two conversions.

1.convert html to pptx by using aspose.pdf
In here first we convert our html to pdf and then pdf to pptx

2, second conversion is convert html to pdf by using aspose.html

In this forum I am asking about the 1st conversion.