diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-HTML/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-HTML/document-editor.cs new file mode 100644 index 0000000000..048a3eb88c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-HTML/document-editor.cs @@ -0,0 +1,5 @@ +public ActionResult Default() +{ + return View(); +} + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-HTML/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-HTML/razor new file mode 100644 index 0000000000..86f2bbf32d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-HTML/razor @@ -0,0 +1,24 @@ + +@Html.EJS().Button("element").Content("Export HTML").Click("exportHTML").Render() +@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render() + +<script> + var documenteditor; + var container; + function onCreated() { + var documenteditorElement = document.getElementById("container"); + container = documenteditorElement.ej2_instances[0]; + documenteditor = container.documentEditor; + } + function exportHTML() { + let http = new XMLHttpRequest(); + // Replace your running web service Url here + http.open('POST', 'http://localhost:62869/api/documenteditor/ExportHTML'); + http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); + http.responseType = 'json'; + //Serialize document content as SFDT. + let sfdt = { content: container.documentEditor.serialize(), fileName: 'Sample.html' }; + //Send the sfdt content to server side. + http.send(JSON.stringify(sfdt)); + } +</script> diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-HTML/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-HTML/tagHelper new file mode 100644 index 0000000000..bbf9c1b376 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-HTML/tagHelper @@ -0,0 +1,25 @@ +<div class="control-section"> + <ejs-button id="element" content="Export HTML" onclick="exportHTML()"></ejs-button> + <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" + height="590px"></ejs-documenteditorcontainer> +</div> +<script> + var documenteditor; + var container; + function onCreated() { + var documenteditorElement = document.getElementById("container"); + container = documenteditorElement.ej2_instances[0]; + documenteditor = container.documentEditor; + } + function exportHTML() { + let http = new XMLHttpRequest(); + // Replace your running web service Url here + http.open('POST', 'http://localhost:62869/api/documenteditor/ExportHTML'); + http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); + http.responseType = 'json'; + //Serialize document content as SFDT. + let sfdt = { content: container.documentEditor.serialize(), fileName: 'Sample.html' }; + //Send the sfdt content to server side. + http.send(JSON.stringify(sfdt)); + } +</script> \ No newline at end of file diff --git a/ej2-asp-core-mvc/document-editor/export.md b/ej2-asp-core-mvc/document-editor/export.md index 5578198bb1..ad941f8f63 100644 --- a/ej2-asp-core-mvc/document-editor/export.md +++ b/ej2-asp-core-mvc/document-editor/export.md @@ -296,4 +296,5 @@ In client-side, you can consume this web service and save the document as Rich T ## See Also * [Feature modules](../document-editor/feature-module/) -* [How to export the document as pdf](../document-editor/how-to/export-document-as-pdf). +* [How to export the document as pdf](../document-editor/how-to/export-document-as-pdf) +* [How to export the document as HTML](../document-editor/how-to/export-document-as-HTML) diff --git a/ej2-asp-core-mvc/document-editor/how-to/export-document-as-HTML.md b/ej2-asp-core-mvc/document-editor/how-to/export-document-as-HTML.md new file mode 100644 index 0000000000..985e24b94f --- /dev/null +++ b/ej2-asp-core-mvc/document-editor/how-to/export-document-as-HTML.md @@ -0,0 +1,76 @@ +--- +layout: post +title: Export HTML Document in ##Platform_Name## Document Editor Component |Syncfusion +description: Learn here all about export document as HTML in Syncfusion ##Platform_Name## Document Editor component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Export Document As HTML +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Export document as HTML in ##Platform_Name## Document editor component + +Document editor doesn't provide support to export document as HTML in client side. We can export the document as HTML using Syncfusion<sup style="font-size:70%">®</sup> DocIO library. + +In this article, we are going to see how to export the document as HTML format. + +## How to Export the document as HTML in DocumentEditor + +### Client-side Code + +The following example code illustrates how to export the document as HTML in client-side. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/export-HTML/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Export-HTML.cs" %} +{% include code-snippet/document-editor-container/export-HTML/document-editor.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/export-HTML/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Export-HTML.cs" %} +{% include code-snippet/document-editor-container/export-HTML/document-editor.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +### Server-side Code + +* Using `serialize` API, convert the document as Sfdt and send it to server-side. + +The following example code illustrates how to convert the document to sfdt and pass it to server-side. + +* Using Save API in server-side, you can convert the sfdt to stream. +* Finally, Save the stream into HTML format. + +Please refer below example for server-side code. + +```csharp +[AcceptVerbs("Post")] +[HttpPost] +[EnableCors("AllowAllOrigins")] +[Route("ExportHTML")] +public void ExportHTML([FromBody] SaveParameter data) +{ + string name = data.FileName; + string format = RetrieveFileType(name); + if (string.IsNullOrEmpty(name)) + { + name = "Document1.doc"; + } + WDocument document = WordDocument.Save(data.Content); + FileStream fileStream = new FileStream(name, FileMode.OpenOrCreate, FileAccess.ReadWrite); + document.Save(fileStream, GetWFormatType(format)); + document.Close(); + fileStream.Close(); +} +``` diff --git a/ej2-asp-core-mvc/document-editor/how-to/export-document-as-pdf.md b/ej2-asp-core-mvc/document-editor/how-to/export-document-as-pdf.md index 0d18e560c9..98e50f3475 100644 --- a/ej2-asp-core-mvc/document-editor/how-to/export-document-as-pdf.md +++ b/ej2-asp-core-mvc/document-editor/how-to/export-document-as-pdf.md @@ -9,7 +9,7 @@ documentation: ug --- -# How to export the document as PDF in React Document Editor +# How to export the document as PDF in ##Platform_Name## Document Editor This article explains how to export the document as PDF format. You can export the document as PDF in following ways: diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 89a11bd2af..cdf0020d09 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -993,6 +993,7 @@ <li><a href="/ej2-asp-core/document-editor/how-to/show-hide-spinner">Show and hide spinner</a></li> <li><a href="/ej2-asp-core/document-editor/how-to/resize-document-editor">Resize document editor</a></li> <li><a href="/ej2-asp-core/document-editor/how-to/export-document-as-pdf">Export the document as Pdf</a></li> + <li><a href="/ej2-asp-core/document-editor/how-to/export-document-as-HTML">Export the document as HTML</a></li> <li><a href="/ej2-asp-core/document-editor/how-to/customize-font-family-drop-down">Customize the font family drop down</a></li> <li><a href="/ej2-asp-core/document-editor/how-to/auto-save-document">Auto save the document in Server</a></li> <li><a href="/ej2-asp-core/document-editor/how-to/auto-save-document-in-document-editor">Auto save the document in AWS S3</a></li> diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index bee4ceeb5f..067087f6bf 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -941,6 +941,7 @@ <li><a href="/ej2-asp-mvc/document-editor/how-to/show-hide-spinner">Show and hide spinner</a></li> <li><a href="/ej2-asp-mvc/document-editor/how-to/resize-document-editor">Resize document editor</a></li> <li><a href="/ej2-asp-mvc/document-editor/how-to/export-document-as-pdf">Export the document as Pdf</a></li> + <li><a href="/ej2-asp-mvc/document-editor/how-to/export-document-as-HTML">Export the document as HTML</a></li> <li><a href="/ej2-asp-mvc/document-editor/how-to/customize-font-family-drop-down">Customize the font family drop down</a></li> <li><a href="/ej2-asp-mvc/document-editor/how-to/auto-save-document">Auto save the document in Server</a></li> <li><a href="/ej2-asp-mvc/document-editor/how-to/auto-save-document-in-document-editor">Auto save the document in AWS S3</a></li>