Guide for C#
Core Document Formats
HTML5 Web Viewer
Additional Features

C# Word - Create Online Word Viewer in C#

How to Create Visual C#.NET Word Web Viewer with DocImage SDK for .NET

Visual C#
Home > .NET Imaging SDK > C# > Create Online Word Web Viewer
If this is your first time to use our DocImageSDK, we strongly suggest you reading How to Start first!

C# DocImage Web Viewer SDK includes a web viewer component, offering some Word viewing and editing features in C# program, such as Word document loading, viewing, converting and annotating. If you want to create Word web viewer for your C# web based application like ASP.NET web project, RasterEdge .NET Imaging SDK & web viewer add-on are the best choice for you. We provide cost effective JavaScript based file viewer to meet you needs, and developers can quickly create Web Document Viewer for Word document viewing and manipulating. (Directly see online document viewer demo here.)
This page is a user manual with detailed steps and sample code to help you create an online Word Viewer in your C# application. In all, you will see the following sections.
  • C# Microsoft Word document online viewer feature list
  • How to create a web document viewer in Visual C# project for Word viewing
  • Some more C# tutorials for Word, PDF and image editing
Online Word document web viewer is aimed to help you conduct simple viewing and editing for MS Office Word within C# web based application. If you are looking for solutions to view Word documents in other projects, we also provide C# tutorials for How to Create Word Document Windows Viewer, and How to Create Word Document Mobile Viewer. For more C# Word editing examples, please refer to the last section of this page or the left menu.
C# Word Document Web Viewer Feature List
  • Provide complete C#.NET Word viewing and editing features without using any third party tools
  • Compliant with Visual C# ASP.NET web application / web based project
  • Compatible with Microsoft Visual Studio 2005 and later versions
  • High fidelity transform of Word document to raster images or vector images like SVG to display & edit
  • View and edit Word document page in C#.NET web document viewer with simple button clicks
  • Annotate any MS Word page with text, freehand, ellipse, rubber stamp and rectangle shapes
  • Reliable C#.NET web document conversion, converting Word document to PDF or TIFF file
  • Support commonly used web browsers, including IE (Internet Explorer), Chrome, Firefox, Safari, etc.
  • Complete Visual C# class sample codes are provided for simple & fast integration and manipulation
How to Create Word Web Viewer in C# .NET
This tutorial displays how to create Word web viewer by using .NET DocImage Web Viewer SDK. For PDF and TIFF web viewer creating, you can go to PDF Web Viewer Creation in C#.NET and TIFF Web Viewer Creation in C#.NET.
  1. Create a website project in Visual Studio 2005 or later;
  2. Add RasterEdge.Imaging.WebViewer.dll to your C#.NET web Word viewing project reference by right-click "Add Reference..." and locate .NET Web Viewer DLL. Once you do this, dependencies will automatically be included in your project.
  3. Copy package file "Web.config" content to your configuration file (Web.config);
  4. Copy Web Document Viewer resources, including RasterEdge_Imaging_Files, RasterEdge_Demo_Docs and RasterEdge_Cache, from download package to your C#.NET Word viewing application. Note, the WebHandler.ashx file has been included in RasterEdge_Imaging_Files.
  5. If you want to add C#.NET Word Web Viewer to your web page, you should add a new Web Form to your project and name it as Default.aspx.
  6. Visual Studio will automatically create a code behind for this file, called Default.aspx.cs. Please copy the following demo code to the head of Default.aspx to load necessary resources for creating web document viewer objects and initialize the viewer.
<link href="RasterEdge_Imaging_Files/RasterEdge.css" rel="stylesheet"type="text/css"/>
<script src="RasterEdge_Imaging_Files/RasterEdge.js" type="text/javascript"></script>
<script src="RasterEdge_Imaging_Files/CreateViewerToolBar.js" type="text/javascript"></script>
<script type="text/javascript">
_fid = "<%=fid %>";
_viewer = new RasterEdgeViewer({
_serverUrl: "/RasterEdge_Imaging_Files/WebHandler.ashx",
//0 represent png, 1 represent svg
_pdfViewer: 1,
_wordViewer: 1,
_excelViewer:1,

//Set width and height of the webViewer(pixel)
_viewerWidth: 1024,
_viewerHeight: 730,
});

//define annotation style
//annotation style
//Color:Hexadecimal color can be used
//Transparency:1 on behalf of saturated, 0 represents completely transparent
//TextStyle:italic/oblique/normal
TextAnnoStyle = new AnnoStyle({FillColor: "White", ShowedText: "double click to edit", TextColor: "Black", TextFont: "Arial", TextSize: 12, TextStyle :"normal"});
FreehandAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 5.0});
HighlightAnnoStyle = new AnnoStyle({FillColor: "Yellow"});
RectangleAnnoStyle = new AnnoStyle({OutLineColor: "Black", OutLineWidth: 3.0});
FilledRectangleAnnoStyle = new AnnoStyle({OutLineColor: "Black", OutLineWidth: 3.0, FillColor: "Black", Transparency: 1});
EllipseAnnoStyle = new AnnoStyle({FillColor: "Orange"});
RubberStampAnnoStyle = new AnnoStyle({OutLineColor: "Tomato", OutLineWidth: 3.0, FillColor: "Red", ShowedText: "Good", TextColor: "Black", TextFont: "Arial", TextSize: 12, TextStyle: "Italic"});
PolygonLinesAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 5.0});
PolygonAnnoStyle = new AnnoStyle({OutLineColor: "OrangeRed", OutLineWidth: 3.0, FillColor: "OrangeRed"});
LineAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 5.0});
ArrowAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 5.0, FillColor: "Red",Transparency:0.8});

//Set whether the toolbar shows the corresponding icon(true or false)
//You can set the item including:_toolbar/_fileToolbar/_annoToolbar/_fullToolbar
//_uploadToolbar/_printToolbar/_saveToolbar/_convertToolbar //_textToolbar/_freehandToolbar/_arrowToolbar/_lineToolbar/_polygonLinesToolbar/_filledRectangleToolbar/_rectangleToolbar/_highlightToolbar/_ellipseToolbar/_polygonToolbar/_rubberStampToolbar/_deleteToolbar
</script>
  1. Add the following HTML into your document's body to create Word document viewing area in C#.NET web viewer;
<div class="re_container">
<div class = "re_func_toolbar"></div>
<div id="_tblImgs"class="re_content" style="width:100%">
<div class="RE_WebViewer" id="REWebViewer1"></div>
</div>
</div>
  1. If you want to use certain functions in C#.NET Web Word Document Viewer, like opening and storing Word file, you may select some codes below to Default.aspx.cs file in your project.
public string mode;
public string fid;
protected void Page_Load(object sender, EventArgs e)
{
string command = Request.Form["RECommand"];
if (command == null || command.Equals(""))
{
WorkRegistry.Reset();
LoadFileFromUrl();
}
else if (command.Equals("OpenFile"))
{
LoadFileFromUpload();
}
else if (command.Equals("SaveFile"))
{
SaveFile();
}
}

public void LoadFileFromUrl()
{
string file = Request.QueryString["file"];
if (file != null &&file != "")
{
file = file.Trim();
string initFilePath = file;
string projectName = System.Web.HttpContext.Current.Request.PhysicalApplicationPath.Replace("\\", "/");
string path = projectName + "
/RasterEdge_Demo_Docs/" + initFilePath;
if (File.Exists(path))
{
fid = REDocumentControl.GenerateId();
string result = LoadFile("
RasterEdge_Demo_Docs" + initFilePath, fid);
if (result != "
")
this.RegisterStartupScript("
", "<script>alert('" + result + "');</script>");
}
}
}

public void LoadFileFromUpload()
{
string uploadFile = Request.Form["
uploadfile"];
string filename = "
/RasterEdge_Cache/" + uploadFile;
fid = Request.Form["
Fid"];
string result = LoadFile(filename, fid);
Response.Clear();
Response.Write(result);
Response.End();

//load document from stream
//REDocumentControl.LoadFile(Stream stream, fid);

//load document from array
//REDocumentControl.LoadFile(byte[] array, fid);
}

public void SaveFile()
{
string fileName = Request.Form["
saveFileName"];
string fid = Request.Form["
Fid"];
Response.Clear();
Response.Write(fileName);
Response.End();
}

private string LoadFile(string filename,string fid)
{
string result = "
";
try
{
REDocumentControl.LoadFile(filename, fid);
}
catch (Exceptionex)
{
result = ex.Message.ToString();
}
return result;
See More C# Viewer Creation Tutorials!
More Tutorials!


Recommend this to Google+


RasterEdge.com is professional provider of document, content and imaging solutions, available for ASP.NET AJAX, Silverlight, Windows Forms as well as WPF. We are dedicated to provide powerful & profession imaging controls, PDF document, image to pdf files and components for capturing, viewing, processing, converting, compressing and stroing images, documents and more.

©2000-2017 Raster Edge.com