diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/compare-sfdt/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor-container/compare-sfdt/document-editor.cs new file mode 100644 index 0000000000..048a3eb88c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/compare-sfdt/document-editor.cs @@ -0,0 +1,5 @@ +public ActionResult Default() +{ + return View(); +} + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/compare-sfdt/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/compare-sfdt/razor new file mode 100644 index 0000000000..62b6d09b3b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/compare-sfdt/razor @@ -0,0 +1,34 @@ + +@Html.EJS().Button("element").Content("Compare SFDT").Click("compare").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; + } + //Compare SFDT + function compare() { + let oldSfdt = + '{"sfdt":"UEsDBAoAAAAIABF8ploJuNVREwMAAAIYAAAEAAAAc2ZkdM2YSW+jMBiG/wrjuUZVAgECt1FH0RxGo0o9VjkYYgdrzDLgDG2j/Pd+XmhCGlK6JeTyGm/f9sQgb1BeCJayR3JLlwKFolyTEapIjMK7DQItShRuUFGj0JvYI1QkKPQDaPAUGqClUWE0MposUeh4I0SNLmmBwjFoTnQjYlrAEvpD6hu8ImiESEZRCMupVBguWaNEKaMZCiegRGuxyirY4EeJIxbD+izOeaVGyL9aKY9ErJbqkbvFFoyq6AoqQ4uWZSVVgFsbGONCa7nSGpnnRMt/KaCVyKTjeZliDna59FMNxFRPZMpGrG3AA8W8ItAvOBhCNeFxnhJL5NbtQxbTdcXyzPqGtovtAmzpzRajZr1ZrnY1LVo9QnwQIIUp6BpzFpUMPFmrYCuhs4uVJDoDsER6ohfJ1t4yHO92prg1RKEY5KCn1QFRfSiXnGWmyFqpUaG9jyolWIspLzcR5vyZJuP+X2m1adfZc7uOG7x3xaKV8UhQrhtLUWtgDTXEgJiAswhCr4zSVNsvtCwTkWpPKNUOQnkLU4oHERkvZR6QJP77XP2QIulBodLiyWz+saweIpnd70xsR9riL4KXLFtZk88y+mop5TGyX8ursR9MPM9zx75vj4Op3y7u5EUkBn2vjb71m60SISuj8mvP3WngoQOad5PaTO/1H+nWJ8ben30/b9Z1gkv0SnKbSUKjcckofhKK11xYN7jEqxIXiTXPM/Hscsdwy/XtYXz22eB5Gzt2FzvOINix+7Bjd7PjDIydxmVnoDg4XTjYJxM5mTu+53w9Dk4fHJxuHM4eRU8cpgPFYfoSB9Z8IgzgdJj2wWF6DIcLRdETB3egOLhHTofLU+D2ocA9eigMsfjeQIvvvan453ojeH2K772x+Jd7EfgDLb7/vhfBuSjw+1Dgv/dFcDkcZgPFYdb1mTi+ck+m0lG/rwdi1geIWfeH4gXi6IlEMFAkglMnxKDYCPqwEZw+LAYMCSk/h5Djl4kvr8xaeVYpNV40Ts3zXFzeKeOFvDHm8uIZFAaVxqnW0jzea2XpqlLbPgFQSwECFAAKAAAACAARfKZaCbjVURMDAAACGAAABAAAAAAAAAAAAAAAAAAAAAAAc2ZkdFBLBQYAAAAAAQABADIAAAA1AwAAAAA="}'; + let newSfdt = + '{"sfdt":"UEsDBAoAAAAIAC18plqO7dc4/AIAAFUXAAAEAAAAc2ZkdM1YyW7bMBD9FZW9GoFl2ZKtW5HU6KEoAuQY+EBJpEWUWkrRdRLD/97hojjy1myw6MujSJHzZt4jLXCDqlqygj2RO5pJFEuxIgPUkBTF9xsEWAsUb1C9RnHojwaozlEczaDBC2gACovSYmIxz1AchANELWa0RvEQsCKmkTADEAn9IutbvCRogEhJUQzTqUIYFqxFopHREsU+IDFYL8sGFvgmcMJSmF+mFW/0CPmz1sgTmeqpZuR+sYWgOruaqtSSTDQKJdDawBiXBsXSYGKfcwN/FQA2slTEK1FgDnG54qkHUmpeZDpGamLAA8W8IdAvOQRCa8LTqiCerLybKl0VpJTe94zJSnh3j2VKVw2rSu8L2i62C4htFl8M2vXscjqKbdHmCfKFhCm8gq4xZ4lgwGylk2+kqTbWkJuKwBTFzExSrRfTcLpbmeLOEAVxyF5PpwOy/FBtOSut6AapRWnYJ40GbMDKzW2GFX92l6X/W0Vt2+vyub1OW7vvxKONZSQpN41Mro2BrYuINWYOZBGk3likhYlfG8hyWRgmlBqCIHdtpXiUiWWp6oDUDvg61z+knfWordPxl138Y1Xdt2j5sAuxHZiIPwjOWLn0/M8K+l8p1bHyUsurYTTzwzCcDKNoNJyNo664/kEm1vph1/reT7bMpVJG13c0n4xnIdpz8+6lrqdf9B/pNifITpyzdfSucyxMMf2eCd8QildcerdY4KXAde7Nq1I+Uz4x3KG+3c9vdDGfvM0mo1M2CZy0yei0TQLHbNJSDhxVPjil/OhsIf15EIXB5ZUPTit/ccKvVH7sqPLjQ+VZ+x/v4J4fH1O+J8KvVH7iqPKTI3vePcEnR7e6izqHjuocvknnvo708I0693eSR47qHL3vJO9L8Oi9J3l/yk8dVX566utteDU5W8pA/y6v/fT091sPlF+p/sxR9Wfn9r3TNpidPwIc9gMRn2OG4/dxh7dOhyW1LFpS86qS/ZOyLNSlK1d3uYAwqDEtDAr7+GCQFctGL/sPUEsBAhQACgAAAAgALXymWo7t1zj8AgAAVRcAAAQAAAAAAAAAAAAAAAAAAAAAAHNmZHRQSwUGAAAAAAEAAQAyAAAAHgMAAAAA"}'; + let url = 'http:localhost:62869/api/documenteditor/Compare'; + let http = new XMLHttpRequest(); + http.open('POST', url); + http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); + // http.responseType = 'json'; + http.onreadystatechange = () => { + if (http.readyState === 4) { + if (http.status === 200 || http.status === 304) { + container.documentEditor.open(http.response); + } + } + }; + let compareInfo = { OldContent: oldSfdt, NewContent: newSfdt }; + http.send(JSON.stringify(compareInfo)); + } +</script> diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/compare-sfdt/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/compare-sfdt/tagHelper new file mode 100644 index 0000000000..6879c8600b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/compare-sfdt/tagHelper @@ -0,0 +1,35 @@ +<div class="control-section"> + <ejs-button id="element" content="Compare SFDT" onclick="compare()"></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; + } + //Compare SFDT + function compare() { + let oldSfdt = + '{"sfdt":"UEsDBAoAAAAIABF8ploJuNVREwMAAAIYAAAEAAAAc2ZkdM2YSW+jMBiG/wrjuUZVAgECt1FH0RxGo0o9VjkYYgdrzDLgDG2j/Pd+XmhCGlK6JeTyGm/f9sQgb1BeCJayR3JLlwKFolyTEapIjMK7DQItShRuUFGj0JvYI1QkKPQDaPAUGqClUWE0MposUeh4I0SNLmmBwjFoTnQjYlrAEvpD6hu8ImiESEZRCMupVBguWaNEKaMZCiegRGuxyirY4EeJIxbD+izOeaVGyL9aKY9ErJbqkbvFFoyq6AoqQ4uWZSVVgFsbGONCa7nSGpnnRMt/KaCVyKTjeZliDna59FMNxFRPZMpGrG3AA8W8ItAvOBhCNeFxnhJL5NbtQxbTdcXyzPqGtovtAmzpzRajZr1ZrnY1LVo9QnwQIIUp6BpzFpUMPFmrYCuhs4uVJDoDsER6ohfJ1t4yHO92prg1RKEY5KCn1QFRfSiXnGWmyFqpUaG9jyolWIspLzcR5vyZJuP+X2m1adfZc7uOG7x3xaKV8UhQrhtLUWtgDTXEgJiAswhCr4zSVNsvtCwTkWpPKNUOQnkLU4oHERkvZR6QJP77XP2QIulBodLiyWz+saweIpnd70xsR9riL4KXLFtZk88y+mop5TGyX8ursR9MPM9zx75vj4Op3y7u5EUkBn2vjb71m60SISuj8mvP3WngoQOad5PaTO/1H+nWJ8ben30/b9Z1gkv0SnKbSUKjcckofhKK11xYN7jEqxIXiTXPM/Hscsdwy/XtYXz22eB5Gzt2FzvOINix+7Bjd7PjDIydxmVnoDg4XTjYJxM5mTu+53w9Dk4fHJxuHM4eRU8cpgPFYfoSB9Z8IgzgdJj2wWF6DIcLRdETB3egOLhHTofLU+D2ocA9eigMsfjeQIvvvan453ojeH2K772x+Jd7EfgDLb7/vhfBuSjw+1Dgv/dFcDkcZgPFYdb1mTi+ck+m0lG/rwdi1geIWfeH4gXi6IlEMFAkglMnxKDYCPqwEZw+LAYMCSk/h5Djl4kvr8xaeVYpNV40Ts3zXFzeKeOFvDHm8uIZFAaVxqnW0jzea2XpqlLbPgFQSwECFAAKAAAACAARfKZaCbjVURMDAAACGAAABAAAAAAAAAAAAAAAAAAAAAAAc2ZkdFBLBQYAAAAAAQABADIAAAA1AwAAAAA="}'; + let newSfdt = + '{"sfdt":"UEsDBAoAAAAIAC18plqO7dc4/AIAAFUXAAAEAAAAc2ZkdM1YyW7bMBD9FZW9GoFl2ZKtW5HU6KEoAuQY+EBJpEWUWkrRdRLD/97hojjy1myw6MujSJHzZt4jLXCDqlqygj2RO5pJFEuxIgPUkBTF9xsEWAsUb1C9RnHojwaozlEczaDBC2gACovSYmIxz1AchANELWa0RvEQsCKmkTADEAn9IutbvCRogEhJUQzTqUIYFqxFopHREsU+IDFYL8sGFvgmcMJSmF+mFW/0CPmz1sgTmeqpZuR+sYWgOruaqtSSTDQKJdDawBiXBsXSYGKfcwN/FQA2slTEK1FgDnG54qkHUmpeZDpGamLAA8W8IdAvOQRCa8LTqiCerLybKl0VpJTe94zJSnh3j2VKVw2rSu8L2i62C4htFl8M2vXscjqKbdHmCfKFhCm8gq4xZ4lgwGylk2+kqTbWkJuKwBTFzExSrRfTcLpbmeLOEAVxyF5PpwOy/FBtOSut6AapRWnYJ40GbMDKzW2GFX92l6X/W0Vt2+vyub1OW7vvxKONZSQpN41Mro2BrYuINWYOZBGk3likhYlfG8hyWRgmlBqCIHdtpXiUiWWp6oDUDvg61z+knfWordPxl138Y1Xdt2j5sAuxHZiIPwjOWLn0/M8K+l8p1bHyUsurYTTzwzCcDKNoNJyNo664/kEm1vph1/reT7bMpVJG13c0n4xnIdpz8+6lrqdf9B/pNifITpyzdfSucyxMMf2eCd8QildcerdY4KXAde7Nq1I+Uz4x3KG+3c9vdDGfvM0mo1M2CZy0yei0TQLHbNJSDhxVPjil/OhsIf15EIXB5ZUPTit/ccKvVH7sqPLjQ+VZ+x/v4J4fH1O+J8KvVH7iqPKTI3vePcEnR7e6izqHjuocvknnvo708I0693eSR47qHL3vJO9L8Oi9J3l/yk8dVX566utteDU5W8pA/y6v/fT091sPlF+p/sxR9Wfn9r3TNpidPwIc9gMRn2OG4/dxh7dOhyW1LFpS86qS/ZOyLNSlK1d3uYAwqDEtDAr7+GCQFctGL/sPUEsBAhQACgAAAAgALXymWo7t1zj8AgAAVRcAAAQAAAAAAAAAAAAAAAAAAAAAAHNmZHRQSwUGAAAAAAEAAQAyAAAAHgMAAAAA"}'; + let url = 'http:localhost:62869/api/documenteditor/Compare'; + let http = new XMLHttpRequest(); + http.open('POST', url); + http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); + // http.responseType = 'json'; + http.onreadystatechange = () => { + if (http.readyState === 4) { + if (http.status === 200 || http.status === 304) { + container.documentEditor.open(http.response); + } + } + }; + let compareInfo = { OldContent: oldSfdt, NewContent: newSfdt }; + http.send(JSON.stringify(compareInfo)); + } +</script> diff --git a/ej2-asp-core-mvc/document-editor/how-to/compare-sfdt.md b/ej2-asp-core-mvc/document-editor/how-to/compare-sfdt.md new file mode 100644 index 0000000000..5690767bd4 --- /dev/null +++ b/ej2-asp-core-mvc/document-editor/how-to/compare-sfdt.md @@ -0,0 +1,86 @@ +--- +layout: post +title: Compare sfdt in Syncfusion ##Platform_Name## Document Editor Component +description: Learn here all about how to Compare sfdt in Syncfusion ##Platform_Name## Document Editor component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Compare sfdt +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# How to Compare sfdt in ##Platform_Name## Document editor control + +## Comparison of sfdt in server-side using Syncfusion DocIO + +The Document Editor does not support document comparison at this time. However, we can utilize the Syncfusion DocIO library to compare documents. DocIO will analyze the original and revised documents, generating a result document that highlights the changes as revisions. + +With the help of [`Syncfusion DocIO`](https://help.syncfusion.com/document-processing/word/word-library/net/word-document/compare-word-documents), you can compare existing documents or documents created from scratch using the Compare method in the .NET Word library (DocIO) on the server side. + +The following way illustrates how to Compare Document: + +The following example code illustrates how to compare the document to call the Compare Web API from server side in client side code. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/compare-sfdt/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Compare-sfdt.cs" %} +{% endhighlight %}{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/compare-sfdt/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Compare-sfdt.cs" %} +{% endhighlight %}{% endtabs %} +{% endif %} + + +* Using Compare web API in server-side, you can Copare the documents. +* We compare the two different documents using docIO compare API and store the result to the Original document. +Save the document to stream and pass it to EJ2 document editor load API to get the Sfdt string. +The resulting document will be opened on the client side. +* Finally, the compared document will shown in Document Editor User interface (UI). + +The following example code illustrates how to compare Documents in server-side. + +```csharp +[AcceptVerbs("Post")] +[HttpPost] +[EnableCors("AllowAllOrigins")] +[Route("Compare")] +public string Compare([FromBody]CompareParmeter para) +{ + Stream oldStream = WordDocument.Save(para.OldContent, FormatType.Docx); + Stream newStream = WordDocument.Save(para.NewContent, FormatType.Docx); + oldStream.Position = 0; + newStream.Position = 0; + string sfdtText = ""; + using (WDocument originalDocument = new WDocument(oldStream, WFormatType.Docx)) + { + using (WDocument revisedDocument = new WDocument(newStream, WFormatType.Docx)) + { + // Compare the original and revised Word documents. + originalDocument.Compare(revisedDocument); + + //Save the Word document to MemoryStream + MemoryStream stream = new MemoryStream(); + originalDocument.Save(stream, WFormatType.Docx); + stream.Position = 0; + + WordDocument document = WordDocument.Load(stream, FormatType.Docx); + sfdtText = Newtonsoft.Json.JsonConvert.SerializeObject(document); + document.Dispose(); + stream.Dispose(); + oldStream.Dispose(); + newStream.Dispose(); + } + + } + return sfdtText; +} +``` \ No newline at end of file diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 9b22766f49..2fc31a8b70 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -1008,6 +1008,7 @@ <li><a href="/ej2-asp-core/document-editor/how-to/change-the-default-search-highlight-color">Change the default search highlight color</a></li> <li><a href="/ej2-asp-core/document-editor/how-to/optimize-sfdt">Optimize the SFDT file</a></li> <li><a href="/ej2-asp-core/document-editor/how-to/enable-ruler-in-document-editor-component">Enable ruler in Document Editor component</a></li> + <li><a href="ej2-asp-core/document-editor/how-to/compare-sfdt">Comparison of SFDT</a></li> </ul> </li> <li>FAQ diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index 6daa8c4bba..b9e7b5c2d3 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -956,6 +956,7 @@ <li><a href="/ej2-asp-mvc/document-editor/how-to/change-the-default-search-highlight-color">Change the default search highlight color</a></li> <li><a href="/ej2-asp-mvc/document-editor/how-to/optimize-sfdt">Optimize the SFDT file</a></li> <li><a href="/ej2-asp-mvc/document-editor/how-to/enable-ruler-in-document-editor-component">Enable ruler in Document Editor component</a></li> + <li><a href="/ej2-asp-mvc/document-editor/how-to/compare-sfdt">Comparison of SFDT</a></li> </ul> </li> <li>FAQ