C# HTML5 Viewer: Add Viewer Control to Your Web Page
How to Add HTML5 Viewer Control on ASPX Web Page of Your C# Application
RasterEdge XDoc.HTML5 Viewer for .NET package includes a sample C# project for how to quickly evaluate .NET Web Document and Image Viewer in Visual Studio and IIS applications. C# programmers may easily test all the best-in-class functions of our web viewer control library.
You may also have a quick evaluation on our XDoc.HTML5 Viewer for .NET in your own C# programming project by following guidance on this page. To start with, you will be guided to add XDoc.HTML5 Viewer control on your C# project ASPX web page.
C# Viewer: Quick to Prepare Source
Firstly, C# users should make some preparations for file viewing and manipulating on HTML5 document viewer.
Create a new website or open your existing one. It is ready to run from Visual Studio.
Add references to assemblies.
Right-click your C# project, select "Add Reference...";
Locate RasterEdge.DocImagSDK(version)\bin in download package;
Add a new reference called RasterEdge.Xdoc.HTML5Viewer.dll to your C# web project;
Once you do this, dependencies will automatically be included in your C# project.
Note: some versions of Visual Studio use a 32-bit internal server. If that is the case, please add x86 version of RasterEdge.Xdoc.HTML5Viewer.dll in your web project. After debugging, you may optionally use x86 or x64 version WebViewer dll to run your project on real IIS Server. For example, if your computer is x64, you can set "Enable 32-Bit Applications" to true or false in corresponding Application pool (True: x86; False: x64).
Modify your configuration file. Copy the content of Web.config in download package to your configuration file which is supposed to be Web.config.
Your C# project will need a copy of Web Document Viewer resources, which include client side javascript and styles. These resources folder called RasterEdge_Resource_Files, RasterEdge_Demo_Docs and RasterEdge_Cache are located in download package. The WebHandler.ashx file has been included in RasterEdge_Resource_Files. Please copy these directories to the root of your C# web project.
Server-side file system and cache files are stored in RasterEdge_Cache folder. You can rename this folder, but at the same time you should change the appsetting node in web.config. The default content is as follows.
<appSettings>
<add key="cacheFolder" value = "RasterEdge_Cache"/>
<add key="sampleFolder" value="RasterEdge_Demo_Docs"/>
</appSettings>
|
C# Viewer: Add Document Viewer to Your ASPX Web Page
In your C# web application, you will want to insert web document viewer into your own web page, but for this example we will work with a new page. Please follow steps below.
Add a new Web Form to your C# project. We assume that you name this file Default.aspx and Visual Studio will automatically create a code behind for this file, called Default.aspx.cs.
Then, copy the following lines of code to the head of Default.aspx. The first five lines of code are to load the necessary resources for creating web document viewer objects. And the remaining code is to initialize your viewer.
<script src="RasterEdge_Resource_Files/Javascript/jquery.js" type="text/javascript"></script>
<script src="RasterEdge_Resource_Files/Javascript/RasterEdge.js" type="text/javascript"></script>
<script src="RasterEdge_Resource_Files/Javascript/customViewer.js" type="text/javascript"></script>
<link rel="stylesheet" href="RasterEdge_Resource_Files/css/RasterEdge.css" type="text/css"/>
<link rel="stylesheet" href="RasterEdge_Resource_Files/css/jquery-ui.css" type="text/css"/>
<script type="text/javascript">
_msgToClient = "<%=MsgToClient%>";
_cacheFolder = "<%=cacheFolder%>";
_resourceFolder = "<%=resourceFolder%>";
_viewer = new RasterEdgeViewer({
_serverUrl: "/RasterEdge_Resource_Files/WebHandler.ashx",
_defaultPage: "Default.aspx",
//0 represent png, 1 represent svg
_pdfViewer: 1,
_wordViewer: 1,
_excelViewer: 1,
_pptViewer: 1,
//Set width and height of the webViewer(pixel)
_viewerWidth: 1024,
_viewerHeight: 730,
});
</script>
|
Next, you can optionally choose and add the following functions to <script></script> of Default.aspx.
//add Tab "File"(RE)
var _tabFile = new ToolbarTab("File");
// var CommandSet = new CommandSet(new Array("upload","openOnlineDoc","print","save","convert","ocr"));
// _tabFile.addCommandSet(CommandSet);
_tabFile.addCommand(new RECommand("upload"));
_tabFile.addCommand(new RECommand("openOnlineDoc"));
_tabFile.addCommand(new RECommand("print"));
_tabFile.addCommand(new RECommand("save"));
_tabFile.addCommand(new RECommand("convert"));
_tabFile.addCommand(new RECommand("toHtml5"));
_tabFile.addCommand(new RECommand("ocr"));
_viewerTopToolbar.addTab(_tabFile);
//add Tab "Annotation"
var _tabAnnotations = new ToolbarTab("Annotation");
//TextFont:Arial/Calibri/Verdana
//TextStyle:bold/italic/underline/line-through
//TextColor:Hexadecimal color can be used
//Transparency:1 on behalf of saturated, 0 represents completely transparent
_tabAnnotations.addCommand(new CommandAnnotation("text",
new AnnoStyle({ OutLineWidth: 3.0, OutLineColor: "#000000", FillColor: "#FFFFFF",
TextColor: "#000000", TextFont: "Arial", TextSize: 18, TextStyle: new Array(), Transparency: 0.8 })));
_tabAnnotations.addCommand(new CommandAnnotation("freeHand",
new AnnoStyle({ OutLineColor: "#ff0000", OutLineWidth: 5.0, Transparency: 1 })));
_tabAnnotations.addCommand(new CommandAnnotation("highLight",
new AnnoStyle({ FillColor: "#ffff00", OutLineWidth: 3.0, OutLineColor: "#ffff00", Transparency: 0.6 })));
_tabAnnotations.addCommand(new CommandAnnotation("rectangle",
new AnnoStyle({ OutLineColor: "#000000", OutLineWidth: 0.0, FillColor: "#000000", Transparency: 1 })));
_tabAnnotations.addCommand(new CommandAnnotation("ellipse",
new AnnoStyle({ FillColor: "Orange", OutLineWidth: 3.0, OutLineColor: "Orange", Transparency: 0.4 })));
_tabAnnotations.addCommand(new CommandAnnotation("rubberStamp",
new AnnoStyle({ FillColor: "OrangeRed", OutLineWidth: 9.0, ShowedText: "Approved",
TextFont: "Calibri", TextStyle: new Array("bold"), Transparency: 1 })));
_tabAnnotations.addCommand(new CommandAnnotation("polygonLines",
new AnnoStyle({ OutLineColor: "Red", OutLineWidth: 5.0, Transparency: 1 })));
_tabAnnotations.addCommand(new CommandAnnotation("polygon",
new AnnoStyle({ OutLineColor: "OrangeRed", OutLineWidth: 3.0, FillColor: "OrangeRed", Transparency: 0.4 })));
_tabAnnotations.addCommand(new CommandAnnotation("line",
new AnnoStyle({ OutLineColor: "Red", OutLineWidth: 7.0, Transparency: 1 })));
_tabAnnotations.addCommand(new CommandAnnotation("arrow",
new AnnoStyle({ OutLineWidth: 9.0, FillColor: "Red", Transparency: 1 })));
_tabAnnotations.addCommand(new CommandAnnotation("image",
new AnnoStyle({ Transparency: 1 })));
var commentsProcess = new CommandSet(new Array("delete", "loadComments", "saveComments"));
_tabAnnotations.addCommandSet(commentsProcess);
_viewerTopToolbar.addTab(_tabAnnotations);
//add Tab "Signature"
var _tabSignature = new ToolbarTab("Signature");
_tabSignature.addCommand(new RECommand("signManager"));
_tabSignature.addCommand(new RECommand("Freehand"));
_tabSignature.addCommand(new RECommand("Text"));
_tabSignature.addCommand(new RECommand("Date"));
_tabSignature.addCommand(new RECommand("commentsProcess"));
_tabSignature.addCommandSet(commentsProcess);
_viewerTopToolbar.addTab(_tabSignature);
//add Tab "Redact"
var _tabRedact = new ToolbarTab("Redact");
var CommandSet = new CommandSet(new Array("rectRedact", "textRedact"));
_tabRedact.addCommandSet(CommandSet);
_tabRedact.addCommandSet(commentsProcess);
_viewerTopToolbar.addTab(_tabRedact);
//add Tab "Sample Files"
var _tabDemoFiles = new ToolbarTab("Sample Files");
//Scenario 1:ID and events take RE default
var _userCmdDemoPdf = new UserCommand("pdf");
_userCmdDemoPdf.addCSS(new customStyle({
background: "url('RasterEdge_Resource_Files/images/demo.png') no-repeat 0px 0px",
width: "31px", height: "40px", marginRight: "15px" }));
_userCmdDemoPdf.addParameter(
new customCmd({ RECommand: "userDefined", FileName: "/RasterEdge_Demo_Docs/pdf/demo_1.pdf" }));
_tabDemoFiles.addCommand(_userCmdDemoPdf);
var _userCmdDemoWord = new UserCommand("word");
_userCmdDemoWord.addCSS(
new customStyle({
background: "url('RasterEdge_Resource_Files/images/demo.png') no-repeat -37px 0px",
width: "31px", height: "40px", marginRight: "15px" }));
_userCmdDemoWord.addParameter(
new customCmd({ RECommand: "userDefined", FileName: "/RasterEdge_Demo_Docs/word/demo_1.docx" }));
_tabDemoFiles.addCommand(_userCmdDemoWord);
var _userCmdDemoExcel = new UserCommand("excel");
_userCmdDemoExcel.addCSS(
new customStyle({ background: "url('RasterEdge_Resource_Files/images/demo.png') no-repeat -73px 0px",
width: "31px", height: "40px", marginRight: "15px" }));
_userCmdDemoExcel.addParameter(
new customCmd({ RECommand: "userDefined", FileName: "/RasterEdge_Demo_Docs/excel/demo_1.xlsx" }));
_tabDemoFiles.addCommand(_userCmdDemoExcel);
var _userCmdDemoPPT = new UserCommand("ppt");
_userCmdDemoPPT.addCSS(
new customStyle({ background: "url('RasterEdge_Resource_Files/images/ppt.png') no-repeat 0px 0px",
width: "31px", height: "40px", marginRight: "15px" }));
_userCmdDemoPPT.addParameter(
new customCmd({ RECommand: "userDefined", FileName: "/RasterEdge_Demo_Docs/ppt/demo_1.pptx" }));
_tabDemoFiles.addCommand(_userCmdDemoPPT);
//Scenario 2:Custom ID and Event. But you should define the event in customViewer.js and define style in RasterEdge.css.
var _userCmdDemoTiff = new UserCommand("tiff");
_userCmdDemoTiff.addId("_tiff");
_userCmdDemoTiff.addEvent(tiffClickEvent);
_tabDemoFiles.addCommand(_userCmdDemoTiff);
//Scenario 3:In addition to the div element,If you need button,input,checkbox......,you can call addHtmlDOM().
//excelHtmlDom defined in customViewer.js
var _userCmdDemoDicom = new UserCommand("dicom");
_userCmdDemoDicom.addHtmlDOM(dcmHtmlDom);
_tabDemoFiles.addCommand(_userCmdDemoDicom);
_viewerTopToolbar.addTab(_tabDemoFiles);
|
Now, add the following HTML into your document's body to create document viewing area.
<div class="re_container">
<div class="re_func_toolbar"></div>
<div class="re_content"></div>
</div>
|
Here are some snippets of Default.aspx. In order to use certain functions, you may select some codes below to Default.aspx.cs file in your C# web project.
LoadFileFromUpload is an API for you to handle documents upload.
LoadFileFromUrl is an API for you to handle the specified file in server file system or another website through the url.
ProcessUserDefinedFileSave is an API for you to handle the saved document which you can customize.
ProcessUserDefinedFileLoad is an example of a user-defined function.
public string MsgToClient = "";
public string cacheFolder = WebConfigurationManager.AppSettings.Get("cacheFolder");
public string resourceFolder = WebConfigurationManager.AppSettings.Get("resourceFolder");
protected void Page_Load(object sender, EventArgs e)
{
RequestServerceHandler();
}
private void RequestServerceHandler()
{
string command = Request.Form["RECommand"];
if (command == null || command.Equals(""))
{
if (Request.Files.Count > 0)
LoadFileFromUpload();
else if (Request.Form["src"] != null)
LoadFileFromOnline();
else
LoadFileFromUrl();
}
else if (command.Equals("FileSave"))
{
ProcessUserDefinedFileSave();
}
else if (command.Equals("userDefined"))
{
ProcessUserDefinedFileLoad();
}
}
|
