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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to print or export the HTML and Native node into image format

Platform: ASP.NET MVC |
Control: Diagram |
Published Date: February 12, 2019 |
Last Revised Date: February 14, 2019

Currently, support to export the diagram into image format with the native and HTML nodes is not available. Since while exporting, the diagram will be drawn in a canvas, and then canvas is converted to image format. Currently, drawing in a canvas equivalent from all possible HTML is not feasible and rendering the SVG content in a canvas and convert canvas to image will get the security issues in IE browser.

You can refer to the following link for more details on this.

https://connect.microsoft.com/IE/feedbackdetail/view/946521/unexpected-call-to-method-or-property-access-while-drawing-svg-image-onto-canvas-in-ie-11

https://connect.microsoft.com/IE/feedback/details/809823/draw-svg-image-on-canvas-context

 

So, Syncfusion Essential PDF library is used, which supports HTML Content to Image conversion by using the advanced Qt WebKit rendering engine.

Qt WebKit rendering is accurate, and the result preserves all the graphics, images, texts, fonts, and the layout of the original HTML Content.

Latest WebKit HTML converter can be downloaded from the following link.

https://www.syncfusion.com/downloads/latest-version

WebKit HTML conversion also requires VC++ 2010 redistributable, this should to be installed in the machine where the conversion takes place. Use the following download link to get the installer.

X86 - https://www.microsoft.com/en-in/download/details.aspx?id=5555

X64 - https://www.microsoft.com/en-in/download/details.aspx?id=14632

Instead, the required assemblies can be placed in the Windows system folder (for the 64-bit machine, it should be placed in $SystemDrive\Windows\SysWOW64 and for the 32-bit machine, it should be placed in $SystemDrive\Windows\System32),

 

  1. MSVCP100.dll
  2. MSVCR100.dll

Prerequisites and Setting up for conversion

 

A utility project is created, which requires the following two things to convert the HTML content to image format.

  • To convert HTML content to Image in the application using WebKit rendering engine, “Syncfusion.HtmlConverter.Base.dll” assembly should be referred in this utility project.

 

  • The QtBinaries folder available in the WebKit HTML Converter installed location ($SystemDrive\Program Files (x86)\Syncfusion\WebKitHTMLConverter\xx.x.x.xx\QtBinaries). The physical path of this folder should be set to the WebKitPath property of WebKitConverterSettings.

 

In utility project, the “ConvertImage” method of DiagramExportingUtility is used to convert the HTML content into image format.

Refer to the following code example.

 

 

ConvertImage

 

Refer to the following table that explains about the arguments needed for the ConvertImage method.

Arguments

Description

htmlContent

Pass an HTML content, which needs to be converted as an image format.

width

Horizontal overflow is not supported in the WebKit converter. So that, if the Diagram width exceeds the document width it could not be paginated to the next page. To overcome this, you must adjust the horizontal view port of the WebKit Converter.

 

This argument can be used to adjust the horizontal view port of WebKit Converter.

webKitPath

Set the physical path of QtBinaries folder.

 

The “ConvertImage” method will return the “base64String” after converting the HTML content to image.

To get the diagram content as HTML string and get the width to adjust the horizontal view port of the WebKit Converter, the following client-side API methods is introduced.

getDiagramContent

 

Method Name

Argument

Return Type

Description

getDiagramContent

styleSheetReferences

It is an optional argument.

By specifying this, you will get the diagram content along with those stylesheet references. Please note that you have to define absolute path for local CSS file.

 

If it is not specified, you will get the diagram content along with all stylesheets loaded in the document.

string

This method is used to get the diagram DOM element as a string along with all dependent stylesheets.

 

Refer to the following code example.

 

 

getDiagramBounds

 

Method Name

Return Type

Description

getDiagramBounds

Object

This method is used to get the diagram bounds.

 

 

Refer to the following code example.

 

You can use those methods to get the HTML content and width, send it to the server through Ajax post to get the diagram content as an image.

Refer to the following code example.

 

exportImage

 

After getting the image converted from server-side, you can save the image with different format with certain exporting options by using the “exportImage” API method.

The exportImage method having all the options as like the exportDiagram API method except “mode” argument, since it is not applicable for the exportImage method.

 So, you can pass the base64Image returned from server-side as the first argument of the exportImage method. You can define the export settings in the second argument.

Refer to the above highlighted code snippet.

To know about export settings, refer to the following link.

https://ej2.syncfusion.com/documentation/api/diagram/iExportOptions/

 

printImage

 

Similarly, you can use the “printImage” method to print the image with certain option and it has all the options as like the print method.

Refer to the final client-side code example as follows

 

Refer to the server-side code example as follows

 

Utility project should be attached in the sample to perform conversion of HTML to image format. The complete ASP.NET Sample can be downloaded.

 

 

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile