1. Home
  2. Forum
  3. Angular - EJ 2
  4. Load and Save Document in Blob format using the docker image

Load and Save Document in Blob format using the docker image

Hello,

I have set up the basic for Document editor and now wanted to load existing documents that are in the string/HTML format in the editor. For server side, I am using the docker image provided in https://hub.docker.com/r/syncfusion/word-processor-server from article https://www.syncfusion.com/blogs/post/view-and-edit-word-documents-in-angular.aspx. 


Can you please provide some samples of the same? 


Thanks,

Mansi


1 Reply
KB Kurthis Banu Abdul Majeeth Syncfusion Team November 10, 2021 08:29 AM UTC

Hi Mansi, 

Thanks for contacting Syncfusion support. 

Regarding: Importing string/HTML string to syncfusion editor. 

To process HTML string, you can use LoadString API in server side which will return sfdt string like below code snippet.  

Code snippet:  
string htmltags = "<?xml version='1.0' encoding='utf - 8'?><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'><html xmlns ='http://www.w3.org/1999/xhtml' xml:lang='en' lang ='en'><body><h1>The img element</h1><img src='https://www.w3schools.com/images/lamp.jpg' alt ='Lamp Image' width='500' height='600'/></body></html>";  
  
WordDocument document = WordDocument.LoadString(htmltags,FormatType.Html);  
string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);  
  
document.Dispose();  
  
return json;  
  
Note: Html string should be welformatted html. DocIO support only welformatted xhtml.   

Docker service Link: 

Then insert that sfdt in front end using paste API.  You can insert the sfdt string in current selection. 

Front end:   
container.documentEditor.editor.paste(“provide sfdt here”);   
  
API Documentation link:  

Regarding: export the same in the same string format for saving to the database 

To export the same string, you can use serialize API in front end which will return document as Sfdt string and using Save API in server side, you can get stream and process it based on your requirement. 

Please check below code for reference: 

Front-End: 
document.getElementById('export').addEventListener('click', () => { 
 
        let http: XMLHttpRequest = new XMLHttpRequest(); 

       // Run the web service then replace the service URL by running local URL.  

        http.open('POST', 'http://localhost:50574/api/documenteditor/ ExportAsHTML'); 

        http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); 

        http.responseType = 'json'; 

        let sfdt: any = { content: container.documentEditor.serialize() }; 
 
        http.send(JSON.stringify(sfdt)); 

        }); 
 
Backend: 
        public string ExportAsHTML([FromBody] SaveParameter data) 
        { 

            Stream document = Syncfusion.EJ2.DocumentEditor.WordDocument.Save(data.content, Syncfusion.EJ2.DocumentEditor.FormatType.Html); 

            FileStream filestream = new FileStream(path + "/ouput.html", FileMode.OpenOrCreate, FileAccess.ReadWrite); 

            document.CopyTo(filestream); 

            StreamReader reader = new StreamReader(document); 

            string html = reader.ReadToEnd(); 

            reader.Close(); 

            document.Close(); 

            return html; 
        } 

 

Documentation Link: 

Note: 
Currently ,Syncfusion provides a predefined Word Processor server Docker image from Docker Hub. This server-side Web API project is targeting ASP.NET Core 2.1.   

If you want to add new functionality or customize any existing functionalities, then create your own Docker file by referencing the existing Word Processor Docker project. 

Please let us know if you have any questions. 

Regards, 
Kurthis Banu A. 


Loader.
Up arrow icon