iframes not working in Html to PDF conversion

[Joseph Pacelli]

We are currently using ExpertPDF and we would need to upgrade since it's a very old version and has a CVE in that version.

So I'm currently evaluating your HTML to PDF portion of your product because we are looking for an all in one product which includes UI controls and an HTML to Pdf convertor. 

On our web page we have an Export to PDF button that when selected captures the innerHTML and sends it to ExpertPDF and everything renders fine and the PDF looks fine. I tried the same with your product and there's a section on the web page called Map&Directions which is an iFrame. It's an embedded google map. Here is the building of the iframe.

 lblGoogleMap.Text = "<iframe width=\"300px\" height=\"320px\" frameborder=\"0\" style=\"border:0\" src=\"https://www.google.com/maps/embed/v1/place?key=[OUR_API_KEY]&q=" + Street1.Replace(" ", "+") + ",+" + City.Replace(" ", "+") + ",+" + State.Replace(" ", "+") + "+" + Zip.Replace(" ", "+") + "\" allowfullscreen output=embed></iframe>";

How can I get the iframe to work correctly? A

[Gowthamraj Kumar]

Hi Joseph Pacelli,

Our HTML converter internally makes use of the WebKit rendering engine for converting HTML to PDF. WebKit rendering engine preserves the output PDF document like how the input HTML file/URL is displayed on the WebKit-based web browsers (safari). The same behavior as replicates in our converter. If the Html web page contains with latest Bootstrap4 styles, but some advanced bootstrap styles are not supported in the WebKit rendering engine. We introduced a new Blink rendering engine, which supports the latest bootstrap styles and advanced web features. Blink converter internally makes use of chromium executable in headless mode for converting HTML to PDF. Blink rendering engine preserves the output PDF document like how the input HTML file/URL is displayed on the Blink-based web browsers (chrome print preview). The same behavior as replicates in our converter. You can check the behavior of the web page by using a chrome print preview. So can you please try our latest Blink rendering engine and let us know if it suits your requirement. The Blink rendering engine has the feature sets that are available in the WebKit rendering engine.

Kindly refer to the below link for more information on our Blink converter.

Blink: https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/blink

Supported Features: https://help.syncfusion.com/file-formats/pdf/converting-html-to-pdf#supported-and-unsupported-features-by-rendering-engines

Steps: https://help.syncfusion.com/file-formats/pdf/converting-html-to-pdf-in-windows-forms#steps-to-convert-a-html-to-pdf-document-using-blink-in-window-forms

We have attached the Blink sample to convert the provided HTML code to a PDF document for your reference, please try the sample with your complete code snippet and let us know the result.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HtmlSample1439143063

Output: https://www.syncfusion.com/downloads/support/directtrac/general/pd/BlinkOutput_Cust-1164569366

If still, you are facing any issue, we request you to share the complete code snippet, complete input File/URL (with all resources such as image, script, styles, etc), and modified sample to replicate the issue on our end. So that it will helpful for us.

Regards,

Gowthamraj K

[Joseph Pacelli]

So I pasted the iframe snippet into the test application and I've attached the pdf output.

It's blank. 

Attachment: BlinkOutput_Cust_d615fd22.zip

[Gowthamraj Kumar]

Hi Joseph Pacelli,

As we said earlier, Blink rendering engine preserves the output PDF document like how the input HTML file/URL is displayed on the Blink-based web browsers (chrome print preview). The same behavior as replicates in our converter. Please check the behavior of your web page by checking in a chrome print preview and ensure whether it is loaded properly or not?

If it is loaded properly, we request you to share the complete input File/URL (with all resources such as image, script, styles, etc), and modified sample to replicate the issue on our end. So that it will helpful for us.

Regards,

Gowthamraj K

[Joseph Pacelli]

Attached is screen shot showing HTML and when I right click and hit print

Also, the iframe_test.html

Attachment: Iframe_test_141609f.zip

[Gowthamraj Kumar]

Hi Joseph,

We have tried the Blink Html to PDF conversion with provided input document “Iframe_test.html” on our end, but it is working properly and map content are rendered. We have attached the sample and output document for your reference, please try the below sample on your end and let us know the result.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HtmlSample_IFrames-1628996296

Output: https://www.syncfusion.com/downloads/support/directtrac/general/pd/BlinkOutput_Latest-838798518

Please let us know if you need any further assistance in this.

Regards,

Gowthamraj K

[Joseph Pacelli]

So the delay helped instead of blank it now shows

[Gowthamraj Kumar]

Hi Joseph,

Thank you for your update. We are glad to know that the reported issue is resolved.

The Blink HTML converter provides an option to set the AdditionalDelay property while converting HTML to PDF. Additional delay is the waiting time of the converter for loading the external resources (styles, scripts, images, and more). 

https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/blink#additional-delay

Please let us know if you need any further assistance in this.

Regards,

Gowthamraj K

[Joseph Pacelli]

Actually it's not resolved. The iframe should look like the following in the PDF

It's like the image is shifted and the top left is in the center. Is there any of setting that is needed?

[Gowthamraj Kumar]

Hi Joseph Pacelli,

We have cross checked the input and output document of the provided web page on our end, but the both are similar and output as expected. Please find the below screenshot,

Input	Output	Chrome Print preview

We have ensured the behavior of the web page by using a chrome print preview, it is similar output. Please find the attached screenshot above.

We request you to share the input document with all resources such as (styles, script), expected output screenshot, to check the issue on our end. So that it will be helpful for us.

Regards,

Gowthamraj K

[Joseph Pacelli]

So I was able to reproduce doing the following

Our webpage has a float:left and a float:right

On the right we have 3 divs

This map is the bottom div, if I move this div above our img it works fine.

I'm also able to reproduce using your sample code which I've attached.

I put some text in a float left div

then added 3 right div's

the top and bottom  are the same googlemap

in the middle is a jpg

The top renders fine in the output the bottom is offset

Attachment: HtmlSample_2662d13e.zip

[Joseph Pacelli]

Also, how do you control the location of the file creation, would like for it to default to the downloads folder and for that notification to show at the bottom like normal downloads that go to downloads folder do

[Gowthamraj Kumar]

Hi Joseph,

We were able to reproduce the reported issue with provided sample on our end. Currently, we are validating on this and we will update the further details on June 20^th , 2022.

Regarding save path in ASP NET WebForms,

It was controlled by the browser setting and the created PDF document was always saved in the download folder. Due to security purposes, we cannot change the saving path from the code snippet. So, we request you to change the specific folder on browser setting, Kindly refer the below link to get the more details, https://support.google.com/chrome/answer/95759

   

Regards,

Gowthamraj K

[Gowthamraj Kumar]

Hi Joseph,

On our further analysis, the provided URL contains some external resources and it takes some time to load. The reported rendering issue occur due to taking some time to load external resources and we are able to overcome this issue by enabling the EnableLazyLoadImages property of Blink converter settings. We have attached the modified code snippet and output document below for your reference,

Code snippet:

//Initialize HTML to PDF converter with Blink rendering engine

HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.Blink);

 

BlinkConverterSettings blinkConverterSettings = new BlinkConverterSettings();

 

//Set Additional delay to load resources

blinkConverterSettings.AdditionalDelay = 2000;

 

//Enable lazy load images

blinkConverterSettings.EnableLazyLoadImages=true;

 

//Assign Blink converter settings to HTML converter

htmlConverter.ConverterSettings = blinkConverterSettings;

 

string htmlcontent = System.IO.File.ReadAllText(@"../../HTML/Iframe_test.html");

 

//Convert URL to PDF

PdfDocument document = htmlConverter.Convert(htmlcontent, "");

 

//Save and close the PDF document

document.Save("../../BlinkOutput_Latest1.pdf");

 

document.Close(true)

Output document: https://www.syncfusion.com/downloads/support/directtrac/general/pd/BlinkOutput_Latest1-201833508

Kindly try the provided solution on your end and let us know the result.

Regards,

Gowthamraj K