We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Bootstrap support in html to pdf conversion

Bootstrap support in html to pdf conversion

Hi,
I am using WebKit rendering engine to convert HTML to PDF.
In HTML template I use bootstrap 4 grid and, after conversion, in the file created with HtmlConverterLibrary the layout I made is absent.
Can anyone help me to solve this problem?

Thanks a lot     

Attachment: bootstrapissue_96f778bd.zip

6 Replies
GK Gowthamraj Kumar Syncfusion Team October 30, 2019 07:09 AM UTC

Hi Marco, 

Thank you for using Syncfusion products. 

We have checked the reported issues with HTML to PDF converter. Our HTML converter internally make use of Qt 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). You can confirm these Bootstrap4 behaviors with Safari and our Qt WebKit browser (internal tool). We have attached a screenshot of the provided Bootstrap4 webpage (without print.min.css) view in safari browser and output PDF document for your reference. WebKit rendering engine itself, preserves the web page like below.  


Steps to use the WebKit browser (internal tool):  
1. Download and Extract the browser from above link.  
2. Copy and Paste the fancybrowser.exe into QtBinaries folder.  
3. Run the fancybrowser.exe.   
4. Browser window will open with default URL (www.google.com ) and you can also modified the URL and check the web page behavior. 

Bootstrap4 HTML view in Safari browser: 
 
 

Qt WebKit Browser image : 

 
WebKit Output Screenshot: 
 
 


Kindly please provide us the complete input HTML file (with all resource style, script, etc.,), code snippet, product version to check the issue in our end. So, that it will be helpful for us to analyze and assist you further on this.  

Regards, 
Gowthamraj K 


MA Marco October 30, 2019 08:33 AM UTC

Hi, thanks for reply.

Print.css file contains mainly Boostrap4 code, here is url of the official source (https://getbootstrap.com/docs/4.3/getting-started/introduction/):

<link rel="stylesheet" rel='nofollow' href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

And here is url of Bootstrap grid documentation:

Does it work with WebKit?

Thanks a lot

MA Marco October 30, 2019 08:47 AM UTC

Here is a basic example of grid system.
Thanks

Attachment: example_395c6d8d.zip

GK Gowthamraj Kumar Syncfusion Team October 30, 2019 01:42 PM UTC

Hi Marco, 

Thank you for your update.   

As we mentioned in earlier, we are internally using Qt WebKit rendering engine for converting HTML to PDF. We have checked the provide HTML file in WebKit based browsers (safari, internal tool), the Bootstrap4 styles are not supported in WebKit rendering engine itself. So only the styles are not working in WebKit based browsers (safari, internal tool) as well as our converter. So, currently it is not possible to preserve the bootstrap4 styles on our converter. 

However, we have suggest you try our new Blink based HTML converter to overcome this issue. Blink converter internally make use of chromium executable in headless mode for converting HTML to PDF. And it have been converted properly to the provided html files. Kindly refer below link for more information of our Blink converter.   
 
 
We have shared the generated output documents of WebKit/Blink HTML converters for your reference, 
 
Note: Blink HTML converter is not supported in .NET Core. 

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

Regards, 
Gowthamraj K 


MA Marco October 31, 2019 08:22 AM UTC

Thanks a lot! Using Blink it works!

Can you tell me if it will be compatible with NET Core?

GK Gowthamraj Kumar Syncfusion Team October 31, 2019 09:42 AM UTC

Hi Marco, 

Thank you for your update. 

Currently, Blink rendering engine do not have support in .NET Core. We have already logged a feature request for “Support for HTML conversion using Blink rendering engine in .net core”. We will implement this feature in any of our upcoming releases and update the details in this forum. 

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

Regards, 
Gowthamraj K

Loader.
Up arrow icon