How to open documentEditor using .docx url?

Question

Hi Team,I have saved the document editor content using saveAsBlob method and passed the blob data into AWS S3 and sample S3 URL is "https://clipapp-dev-files.s3.ap-south-1.amazonaws.com/reportfiles/80f5e4ed-1efa-4c58-8701-7ec9a3b07950/6515e968-d874-44c9-a5ae-9378b1d371eb/doc_editor_q1pp9rcxn.docx".Now, I want to open/load document editor with content available in above mentioned .docx URL. Please let me know how to achieve this?

Stephen Raj Chandra Sekar · Accepted Answer

Hi Arul, 
 
 
Document editor provides API to get the current document content as SFDT JSON string. Kindly use the below serialize API which will return the SFDT String. 
 
https://ej2.syncfusion.com/react/documentation/api/document-editor/#serialize 
 




//sample code snippet 
container.documentEditor. serialize() 
 
Kindly check it and let us know whether this helps. 
 
 
Regards, 
Stephen Raj

Harini Chellappa · Answer

Hi Arul, 

Syncfusion Greetings! 

DocumentEditor’s open API will accept only SFDT json string. No other types will be supported. 
 
We need to convert the word documents to SFDT in server side with the help of WordEditor package. 

Kindly refer the below documentation for converting word documents to SFDT. 

https://ej2.syncfusion.com/react/documentation/document-editor/import/#convert-word-documents-into-sfdt  

Please check the below sample code snippet for importing file from url.  





        public HttpResponseMessage ImportFileURL([FromBody]FileUrlInfo param)  
        {  
            try  
            {  
   
                using (WebClient client = new WebClient())  
                {  
                    MemoryStream stream = new MemoryStream(client.DownloadData(param.fileUrl));  
                    Syncfusion.EJ2.DocumentEditor.WordDocument document = Syncfusion.EJ2.DocumentEditor.WordDocument.Load(stream, Syncfusion.EJ2.DocumentEditor.FormatType.Docx);  
                    string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);  
                    document.Dispose();  
                    stream.Dispose();  
                    return new HttpResponseMessage() { Content = new StringContent(json, Encoding.UTF8, "text/plain") };  
                }  
            }  
            catch (Exception ex)  
            {  
                return new HttpResponseMessage() { Content = new StringContent("", Encoding.UTF8, "text/plain") };  
            }  
        }  

Note: pass the file url to download data. 
 
Kindly check the above and let us know if you need any further assistance on this. 

Regards, 

Harini C

Arul Lakshmanan · Answer

Hi Team,Can you please give a solution for reactjs code? I am using reactjs code and need it.

Harini Chellappa · Answer

Hi Arul, 

Though if you get document stream from Url in client-side, you have to send the stream to server-side for further processing. I.e. to convert document stream to SFDT, since we have provided server side support for converting word document to SFDT. 

As mentioned earlier, Document editor accepts only SFDT JSON string. 

Hence you can pass the url to server side and convert it to SFDT and return the sfdt string to client-side to open it in document editor. 

Regards, 

Harini C

Arul Lakshmanan · Answer

Hi,Thank for the update.I am using reactRight now we are using saveasblob() and upload the file as a .doc in s3.As you mentioned we can't pass the .doc file directly into the Document editor, need to convert as SFDT.Is there any option for saveassfdt(). So it will easy for us to keep the SFDT file in s3 and load SFTD direct to the document editorI tried a save('filename', sfdt) but this download a file in the local machine. I want only the SFDT data alone

Princy Lourdu · Answer

i'm princy. i am a junior angular developer, i have some doubts regarding ejs syncfusion document editor i am getting api response as a value like. http://localhost//resource/default/filename/1686571037_file_sample_100kB.docx this i can't able to display. i found that u also faced this issue like 3yrs ago. did you find the solution?.

Kavitha Muralitharan · Answer

Hi Princy,Currently we are checking and will update the details by June
16, 2023.Regards,Kavitha M

Princy Lourdu · Answer

Hi kavitha,      Thanks for your response. Can you explain  answer for my question?

Kavitha Muralitharan · Answer

Princy,
Document Editor’s open API will accept only SFDT json string. No other types
will be supported. but all the MS Word file formats can be converted to SFDT
using the server-side in ASP.NET Core, ASP.NET MVC and Java.Kindly refer to the below documentation for converting word
documents to SFDT. https://ej2.syncfusion.com/react/documentation/document-editor/import/#convert-word-documents-into-sfdt  https://ej2.syncfusion.com/react/documentation/document-editor/how-to/open-document-by-address
Please check the below sample code snippet for importing
file from url.

public HttpResponseMessage ImportFileURL([FromBody]FileUrlInfo
  param)  
         
  {  
             
  try  
             
  {

using (WebClient client = new WebClient())  
                 
  {  
        
               MemoryStream
  stream = new MemoryStream(client.DownloadData(param.fileUrl));  
                     
  Syncfusion.EJ2.DocumentEditor.WordDocument document = Syncfusion.EJ2.DocumentEditor.WordDocument.Load(stream,
  Syncfusion.EJ2.DocumentEditor.FormatType.Docx);  
                     
  string json =
  Newtonsoft.Json.JsonConvert.SerializeObject(document);  
                     
  document.Dispose();  
                     
  stream.Dispose();  
                    
   return new HttpResponseMessage() {
  Content = new StringContent(json, Encoding.UTF8, "text/plain") };  
                 
  }  
             
  }  
             
  catch (Exception ex)  
             
  {  
                 
  return new HttpResponseMessage() { Content = new StringContent("",
  Encoding.UTF8, "text/plain") };  
             
  }  
         
  }

Note: pass the file url to download data. Kindly check the above and let us know if you need any
further assistance with this.

Aliasgar Taksali · Answer

Hi Kavitha,I am using a python (django) backend. Is there a syncfusion library for python? How do I implement syncfusion with python?Thanks!

Dhanush Sekar · Answer

Hi Aliasgar,

Document editor does not have native support to open a document using Python, we can use the .NET Core Wrapper as a Python backend.

GitHub link:

EJ2-Document-Editor-Web-Services/Python at master · SyncfusionExamples/EJ2-Document-Editor-Web-Services

Regards,Dhanush S

Aliasgar Taksali · Answer

So, basically my need is to open a default document whenever the document editor is opened. And as per my understanding (if I'm correct), for that I need to pass the sfdt string in api response from backend (in my case django) so that the document editor (which is running in react frontend) can open it.

Now, my doubt is that how can I convert Base64 to sfdt in python or vice versa and which python libraries will I need to install? A code sample for the same would be very much helpful. Also, how does the "Open" button work in the toolbar? How does it convert the document into sfdt in frontend (react) without the need of backend api being called?

I also want to restrict the editing permissions to certain users. How do I do it?

Thanks!

Mohammed Affan Saqib Hussain · Answer

Hi Aliasgar Taksali,Regarding Converting Base64 to SFDT:If you have a base64 string representing a Word document, you can provide it to the import method.This method is part of a .NET library and can be accessed in Python via a .NET wrapper. This wrapper allows Python to efficiently call the method, process the input, and produce an SFDT file as output. The resulting SFDT file can then be opened on the client side. Please review the import.py file provided, which demonstrates the use of a .NET DLL file and the invocation of the import method in Python.GitHub Link : https://github.com/SyncfusionExamples/EJ2-Document-Editor-Web-Services/blob/master/Python/API%20files%20in%20Python/import.pyRegarding restrict the editing permissions to certain users:The Document Editor includes a restrict editing function that allows you to limit the editing capabilities of a document. For further information, please consult the documentation below.Documentation - https://ej2.syncfusion.com/react/documentation/document-editor/restrict-editingRegards,Mohammed Affan C