How to show Html content with all styling in the each rectangular box drawn in a pdf page

[Harshit Goel]

Hi Team

I am creating AWS lambda function where I am using Syncfusion.HtmlToPdfConverter.Net.Aws package to generate pdf and in that pdf I am drawing 8 rectangles as shown in the sample output I provided below.

Now the problem is that I have some Html Content for each box to be shown in the pdf, and for that I was using

PdfHtmlTextElement referring  to this link: https://help.syncfusion.com/file-formats/pdf/working-with-text#adding-a-html-styled-text. 

After trying this, I am getting the content in each rectangle box in pdf but the content is not properly formatted as it was expected like the bulleted, numbering lists are not showing, the h5 tag is not working. Overall the html styling is not working .  Below is the Html I tried: 

<h5>Initial Actions</h5>

<p>The individual discovering or receiving information about an incident will take the following steps:</p>

<ol>

  <li>Call police, fire or EMS if needed.</li>

  <li>Activate the emergency system---Notify the IC,</li>

  <ul>

    <li>{GuideItem:13}</li>

  </ul>

  <li>Take action to protect all personnel, vistors and property. This might include;</li>

  <ul>

    <li>{GuideItem:14}</li>

  </ul>

</ol>

And the output pdf after including this Html is in the below file.

So please let me know how can I show Html content with all styling (like bullets, numbering, heading, alignment,etc.) in each rectangular box in pdf page.  

Also I have included the expected output pdf in below file.

Thanks and regards

Harshit Goel

Attachment: Sample_Outputs_2c462c9b.zip

[Ravikumar Baladhandapani]

The PdfHTMLTextElement class provides support for a basic set of HTML tags, to render HTML format text in the PDF document and it does not support mentioned tags in the provided html content. The below finalize tags are only supported in PdfHTMLTextElement. (https://help.syncfusion.com/file-formats/pdf/working-with-text#adding-a-html-styled-text). and we don't have any plan to include more style tags when drawing text using the PdfHTMLTextElement API.

[Harshit Goel]

Hi Team, 

 Thanks for your swift response, I understand that you don't have any plan to add more features to "PdfHTMLTextElement" API.

In order to resolve our issue is there any possibility to use "HtmlToPdf" which returns a PDF document. Instead of returning a complete document, can we use it to add multiple small HTML chunks on the same page and draw them separately. Or maybe any other solution that you can suggest us.

 I'm afraid saying this, but this is a crucial module of the application that we are developing, if we aren't able to find a solution, we'll need to look for some other library.

Thanks & Regards

Harshit Goel

[Santhiya Narayanan]

We have checked the expected output document, and it is possible to create the pdf document as you expect on our end. You have added eight tables. So,we need to perform the eight conversions. As a result, there may be performance issues.

Using the Syncfusion.HtmlToPdfConverter.Net package, are you creating the PDF from HTML and then adding the content to the PDF? Could you please share the complete code snippet and the output document you generated using this package?

Additionally, could you provide the code snippet for adding the 8 rectangles and the data for filling these rectangles?

If you share the above requested details, we will check and analyze how to optimize and achieve your requirements on our end. So that it will be helpful for us to analyze and assist you further on this.

[Harshit Goel]

Hi Team, Thanks for the quick reply. 

I've attached the complete code (function.cs) file for your reference with the generated output. Let me explain the requirements in detail - 

 1. We have a module called Guides (named GuideA, GuideB, ...)which generates various guides in single page PDF format. For this purpose we've created an AWS lambda function which accepts following parameters (GuideName, OwnereEntityType, OwnerEntityId). 

2. Each guide have multiple rectangle boxes which shows some information within them. The content of these boxes depends upon the parameters (OwnerEntityType and OwnerEntityId) passed to the funciton. 

 3. Dimension of each box, and the content to be shown inside the box is stored in a database table which we query from within the function.

 4. As soon as we get the details from database, we draw the rectangles on the page, and then draw the content inside those boxes. 

5. Now the problem here is that the content to be drawn inside these boxes is HTML content, but with limited capability of "PdfHtmlTextElement" method, we are unable to get the expected output inside the boxes. 

6. We thought of trying "Convert" method of "Syncfusion.HtmlToPdfConverter.Net.AWS" (which we are already using in another module), but failed because I can't pass multiple HTMLs.

 Just wondering, if there is any way so that I can achieve the required results. 

 Please Note: I've already attached (with my first message) the required output samples, alaong with a sample HTML (of one box only, you can repeat it in all boxes for experiment) for one of the guides that we want to generate. 

Thanks and Regards 

Harshit Goel

Attachment: Code_e68adc4e.zip

[Santhiya Narayanan]

Currently we are analyzing your requirement and will update the further details on Aug 11th,2023.

[Santhiya Narayanan]

We have checked the provided code, you have used some JSON and DB to get the rectangle and HTML string. But, we are unable to populate data as you used. However, we have created simple sample to achieve your requirement with default values.

 We have used some default values for the rectangles and HTML string in below sample. Kindly try this sample and using this implementation, you can achieve your requirement with actual rectangle and HTML strings. Please find the sample and output PDF document from below links,
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HTMLTemplateDemo2034645195

Output: https://www.syncfusion.com/downloads/support/directtrac/general/pd/Output411268354

Note: This is a simple .NET Core console sample, you can use the same code in your Azure Function App.

[Harshit Goel]

Hi Team,

Thanks for the suggestion. I will try the approach you have mentioned in the sample.

If further I'll need any assistance, I will tell you. 

Thanks and Regards 

Harshit Goel

 

[Santhiya Narayanan]

We will wait to hear from you

[Harshit Goel]

Hi Team, 

Thanks for your suggestion, using this approach we're able to fulfill our requirement and generated the pdf successfully using templates inside the rectangle boxes.

But now the problem is when we're enclosing some boxes html inside the anchor tag and then generating the pdf, the links are not being clickable even we've provided the correct url in anchor tag and also in some boxes even we're not able to see the blue colored text completely which should appear after applying the anchor tags.

Below I have attached the complete code snippet, html we're using for each box and also I've attached our generated output as well as the expected output.

Please resolve our query as soon as possible.

Thanks and Regards 

Harshit Goel  

 

Attachment: file_32751781.zip

[Santhiya Narayanan]

On our further analysis, while drawing the page template, the annotation and form fields will not be preserved. This is the limitation.

We have modified the sample to achieve your requirements and attached it for your reference. kindly try the sample on your end and let us now the result.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HTMLTemplateDemo20346451951918919830
Output: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Output1726652621

To add the hyperlink, we loaded the HTML converted stream and drawn the page template. After getting the annotation count from the loaded document, we created a new annotation using the existing annotation bounds value. Then we have added the annotation to the final document page.

[Harshit Goel]

Thanks for your suggestion. This approach worked for me. 

But the problem is, In some boxes we're not able to see the hyperlink in blue color which should appear after applying the anchor tags in html.

I have attached the sample html, expected and produced output in attachment below:

Attachment: attachment_8ea74e44.zip

[Santhiya Narayanan]

We have checked the reported issue with the provided HTML. However, the hyperlink does not appear in blue color in the Chrome browser itself. The same behavior will be replicated in our library. The hyperlink within the output PDF document will be preserved, like how the hyperlink is preserved in chromium-based web browser.

Please refer the below screenshot,