Thursday, November 1, 2012

How to edit word document using Asp.Net?


Problem -
 

Editing word document is not an easy task in ASP.Net, because we don't have any direct option to open server copy of word document. When we open any word document from server machine then first that document is downloaded to client machine's temp folder and then it is displayed. So if we will make any changes to that opened document then that changes will be saved in only client machine not in server machine.
 

Means the changes will not be reflected directly to server copy of word document.   
 

I have done some RND in this problem and came with one workaround. Hope this solution will help you.


Workaround-

There are some steps for this workaround.

Step 1: Store your document in any server folder.

Step 2: Read that document from server and convert to HTML Document.

Step 3: Now load converted HTML document to any HTML editor, for this you can use any free editor, there are lot of free editors are available in the market you can use anyone.

See this link for free HTML editors -

http://www.techsupportalert.com/best-free-html-editor.htm
Step4: Start editing document which is displayed in HTML editor using HTML editor ToolBox.

Step 5: After editing document get updated data from HTML editor and load to MemoryStream object.

Step 6: Finally again convert that MemoryStream object data to word file.

By following these steps you can edit word document online for this there is no need to use any paid third party controls.

Code Implementation-

For this implementation, I am using following tools-

1. Aspose DLL –   For converting Word document to HTML document and vice versa.
(I am using evaluation copy)

2. nicEditor HTML Editor - for showing and editing converted HTML document.
(It is free)

Now I have designed .aspx page like this-

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditDocument.aspx.cs" Inherits="OnlineEdit.EditDocument"
    ValidateRequest="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="NicScript/nicEdit.js" type="text/javascript"></script>
    <script type="text/javascript">
        bkLib.onDomLoaded(function () {
            new nicEditor({ fullPanel: true, iconsPath: 'NicScript/nicEditorIcons.gif' }).panelInstance('docArea');
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table border="1">
            <tr>
                 <td>
                     <textarea cols="100" rows="20" id="docArea" runat="server"></textarea>
               </td>
            </tr>
            <tr>
                 <td align="center">
                   <asp:Button ID="btnLoad" runat="server" Text="Load Doc" Width="70px" OnClick="btnLoad_Click" />
                        
                   <asp:Button ID="btnSave" runat="server" Text="Save" Width="70px" OnClick="btnSave_Click" />
                 </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>



Note-   Set ValidateRequest="false"


Here I have taken one TextArea control by named – docArea. This will be used for showing and editing Word document. For this I have bounded nicEditor editor with TextArea. Using these lines of code-

    <script type="text/javascript">
        bkLib.onDomLoaded(function () {
            new nicEditor({ fullPanel: true, iconsPath: 'NicScript/nicEditorIcons.gif' }).panelInstance('docArea');
        });
    </script>


Pictorial representation will be like this-

Edit word document using ASP.Net


Now write following code in code behind-

protected void btnLoad_Click(object sender, EventArgs e)
        {
            string strFileName = Server.MapPath("docs\\" + "Eggheadcafe.doc");
            
             //Loading word document to HTML editor
            LoadDoc(strFileName);
        }

Here, I am reading Word document from docs directory (which is present in my solution structure) and passing to LoadDoc () function.

//Function to convert word document to HTML document after that loading into HTML editor
        private void LoadDoc(string strFileName)
        {
            //Loading  doc file using Document class of Aspose DLL
            Document doc = new Document(strFileName);

             //SaveOptions for image which is present in Word document
            HtmlSaveOptions options = new HtmlSaveOptions(SaveFormat.Html);
            string strImagePath = Server.MapPath("docs\\");

             //Location to save images which is included in word document
            options.ImagesFolder = strImagePath;
            options.ImagesFolderAlias = "docs\\";

           //Setting SaveFormat to save as HTML document
            options.SaveFormat = SaveFormat.Html;

           //Saving  file as HTML document
            doc.Save(strFileName + ".html", options);

             //Reading converted HTML file in Editor
            StreamReader sr = new StreamReader(strFileName + ".html");
            string strValue = sr.ReadToEnd();
            docArea.Value = strValue;
             sr.Close();
            sr.Dispose();
        }



In above function I have used Document class of Aspose dll to load Word document.
            Document doc = new Document(strFileName);

After loading document, we need to set the path for saving images which is included in Word document, for this I have used HtmlSaveOptions class.
       
            HtmlSaveOptions options = new HtmlSaveOptions(SaveFormat.Html);
            string strImagePath = Server.MapPath("docs\\");

//Location to save images which is included in word document
            options.ImagesFolder = strImagePath;
            options.ImagesFolderAlias = "docs\\";


Finally to save Word document as HTML document we need to set SaveFormat

            options.SaveFormat = SaveFormat.Html;
            doc.Save(strFileName + ".html", options);


Once these lines of code will be executed Word document will be converted to HTML document. Now we can load this HTML document to HTML editor.

             //Reading converted HTML file in Editor
            StreamReader sr = new StreamReader(strFileName + ".html");
            string strValue = sr.ReadToEnd();
            docArea.Value = strValue;
             sr.Close();
            sr.Dispose();


Output will be like this, when we will click on Load() button-

Edit word document using ASP.Net


Now to save edited document use the following code-

    protected void btnSave_Click(object sender, EventArgs e)
         {
             //Getting Text of HTML editor and writing into memorystream class object
            MemoryStream storeStream = new MemoryStream();
            StreamWriter sw = new StreamWriter(storeStream);
             sw.Write(docArea.Value);
             sw.Flush();

             //Again saving edited document with same name
            string strFileName = Server.MapPath("docs\\" + "Eggheadcafe.doc");
            Document doc = new Document(storeStream);
             doc.Save(strFileName, SaveFormat.Doc);
            storeStream.Close();
            storeStream.Dispose();
            sw.Close();
            sw.Dispose();
        }



In above code, first I am getting all the text of TextArea and writing to MemoryStream class object.

//Getting Text of HTML editor and writing into memorystream class object    
           MemoryStream storeStream = new MemoryStream();
            StreamWriter sw = new StreamWriter(storeStream);
            sw.Write(docArea.Value);
            sw.Flush();


After storing data into MemoryStream class object, I am using Document class of Aspose dll to write that data into same word file.

             //Again saving edited document with same name
            string strFileName = Server.MapPath("docs\\" + "Eggheadcafe.doc");
            Document doc = new Document(storeStream);
             doc.Save(strFileName, SaveFormat.Doc);
            storeStream.Close();
            storeStream.Dispose();
            sw.Close();
            sw.Dispose();


Now you are done.  We can test edited word document by going to same location where we have stored Word document.

Limitations-

1. One Extra HTML document will be created

2. You need to explicitly delete that HTML document after editing.

3. Time taking process because first you need to convert word doc to HTML doc and after editing again you have to create word doc.

4. Formatting can be lost, it depends on HTML editor.


Thanks


7 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. a good workaround but this approach won't work if the person wants to actually perform word editing such as adding comments , tracking changes, etc. How do you suggest that these can be achieved?

    ReplyDelete
  3. Yes, You are correct. B using this approach we can simply change he contents of Word file. In this case it is better to download that document and after doing changes again upload it.

    ReplyDelete
  4. Sir i tried this code but giving error . please can you send the complete code in a zip folder to baijuep@yahoo.com please.

    ReplyDelete
  5. There must be a way to open a file from the server on your local machine in word, edit it, and then save it directly back to the server. I know this must be possible because I do it with Sharepoint all the time. But does anyone know how this is accomplished?

    ReplyDelete
  6. is that possible? using asp.net application?

    ReplyDelete
  7. This word file detail editor can be very advantageous for the organizations that do editing work in word files. word file detail editor

    ReplyDelete