Generic Document Viewer in Asp.Net Web Applications

Question

0.00/5 (No votes)

See more:

Hi Guys,

I would like to know if there is a solution to have a generic document viewer so that customers are not forced to install adobe,word,excel etc etc.

One way i have found is to go for the Google Docs. But the problem is that we need to pass the file path to the Google Api. Most of the customers don't want to share the data.

May i know if we could come up with a solution ?

Thanks,
Praveen R

Posted 14-Oct-13 23:20pm

TechnoPravi

Add a Solution

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

thatraja · Answer 1 · 2013-10-15T01:11:00

I think you won't get easy solution. You have to do a lot.

Here some resources for you to go ahead.
ASP.NET PDF Viewer User Control Without Acrobat Reader Installed on Client or Server[^]
Word/Excel ActiveX Controls in ASP.NET[^]
Converting Document (Word\ Excel\ PowerPoint\ Visio\ text\ XML\ RTF\ CSV etc.) to PDF using MSOffice .NET API[^]
Microsoft Interop API to convert the .doc, .docx, .dot, .dotx and .xls,.xlsx, .rtf to HTML[^]
Dynamically generate a MS Word document using HTML & CSS[^]

There's a simple way......Yes.
Go with 3rd party controls like (Aspose, Doconut, edrawsoft)<-----select the text there to show text(To avoid spam label).

BTW if you find any free or opensource component please let us know.

Ajay J Singh · Answer 2 · 2013-10-15T00:22:00

Solution 2

ASP.NET Multipage TIFF Viewer with Thumbnails[^]

Please find this link will help you

Posted 15-Oct-13 0:22am

Ajay J Singh

Pattrick Hu · Answer 3 · 2013-12-30T22:48:00

Solution 4

You can try out "Doconut" which is native asp.net way to view multiple file formats online without using any plugins. Works on shared hosting also, my company is currently using it in our document management product to view files online from browser.

Posted 30-Dec-13 22:48pm

Pattrick Hu

Comments

Bhanu Pratap Verma 11-Jul-14 5:10am

Dear Pattrick Hu,
I am also trying Doconut support team to download the viewer, I sent 3 times email to doconut but they are not responding. Please help us.

Ajay J Singh · Answer 4 · 2013-10-15T00:20:00

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DocumentViewer.ascx.cs" Inherits="DMS.UserControl.DocumentViewer" %>
<script type="text/javascript" src="../UserControl/JavaScript/jquery.js"></script>
<script type="text/javascript" src="../UserControl/JavaScript/jquery-latest.pack.js"></script>
<script type="text/javascript" src="../UserControl/JavaScript/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../UserControl/JavaScript/jquery.csstransform.1.0.pack.js"></script>
<script type="text/javascript">

var actualWidth = 900;
var actualHeight = 700;

var screenWidth = 0;
var screenHeight = 0;

var w = 0;
var h = 0;

var panTool = false;

$(document).ready(function () {
$(window).load(function () {
$(".viewer").css({ 'width': actualWidth, 'height': actualHeight });
$(".viewerToolBar").css({ 'width': actualWidth });
w = actualWidth;
h = actualHeight;
$("#imgLoading").css({ 'width': (w / 100) * 66, 'margin-left': (w / 100) * 16 });
screenWidth = $(document).width();
screenHeight = $(document).height();
});
});

$(window).bind('resize', function () {
screenWidth = $(document).width();
screenHeight = $(document).height();
});

function zoomIn() {
document.getElementById('<%= imgImageView.ClientID %>').style.width = (parseInt(w) + 50).toString() + 'px'; w = parseInt(w) + 50; document.getElementById('<%= imgImageView.ClientID %>').style.height = (parseInt(h) + 50).toString() + 'px'; h = parseInt(h) + 50;
}

function zoomOut() {
if (parseInt(w) > 0) { document.getElementById('<%= imgImageView.ClientID %>').style.width = (parseInt(w) - 50).toString() + 'px'; w = parseInt(w) - 50; } if (parseInt(h) > 0) { document.getElementById('<%= imgImageView.ClientID %>').style.height = (parseInt(h) - 50).toString() + 'px'; h = parseInt(h) - 50; }
}

function rotateImage(rotateID) {
var _css = null;
if (rotateID == 1) {
_css = { rotate: '-=90' };
}
else if (rotateID == 2) {
_css = { rotate: '+=90' };
}
$('#' + '<%= imgImageView.ClientID %>').animate(_css, 0.8 * 1000, 'swing');
}

function viewLarge(pageID) {
$("#divLoading").show();
$("#imgLoading").show();

if (document.getElementById('<%= imgImageView.ClientID %>') != null) {
document.getElementById('<%= imgImageView.ClientID %>').src = "../UserControl/PdfHandler.ashx?PageID=" + pageID;
return false;
}
return false;
}

function viewerEvent(e) {

var ee = e.keyCode ? e.keyCode : e.which;

if (ee == 43) { //+
zoomIn();
}
else if (ee == 45) { //-
zoomOut();
}
else if (e.ctrlKey && ee == 37) //Left
{
rotateImage(1);
}
else if (e.ctrlKey && ee == 38) //Up
{
rotateImage(1);
}
else if (e.ctrlKey && ee == 39) //Right
{
rotateImage(2);
}
else if (e.ctrlKey && ee == 40) //Down
{
rotateImage(2);
}
else if (ee == 33) //PageUp
{
previousPage();
}
else if (ee == 34) //PageDown
{
nextPage();
}
else if (e.shiftKey && ee == 37) //Left
{
document.getElementById('<%= divImageView.ClientID %>').scrollLeft = document.getElementById('<%= divImageView.ClientID %>').scrollLeft - 50;
}
else if (e.shiftKey && ee == 39) //Right
{
document.getElementById('<%= divImageView.ClientID %>').scrollLeft = document.getElementById('<%= divImageView.ClientID %>').scrollLeft + 50;
}
else if (e.shiftKey && ee == 38) //Up
{
document.getElementById('<%= divImageView.ClientID %>').scrollTop = document.getElementById('<%= divImageView.ClientID %>').scrollTop - 50;
}
else if (e.shiftKey && ee == 40) //Down
{
document.getElementById('<%= divImageView.ClientID %>').scrollTop = document.getElementById('<%= divImageView.ClientID %>').scrollTop + 50;
}
}

function previousPage() {
var pageNumber = document.getElementById('<%= hdfCurrentPageNumber.ClientID %>').value;
if (parseInt(pageNumber) > 1) {
pageNumber = parseInt(pageNumber) - 1;
document.getElementById('<%= hdfCurrentPageNumber.ClientID %>').value = pageNumber;
document.getElementById('<%= txtCurrentPageNumber.ClientID %>').value = pageNumber;
viewLarge(pageNumber);
}
}

function nextPage() {
var pageNumber = document.getElementById('<%= hdfCurrentPageNumber.ClientID %>').value;
if (parseInt(pageNumber) < parseInt(document.getElementById('<%= hdfTotalPageNumber.ClientID %>').value)) {
pageNumber = parseInt(pageNumber) + 1;
document.getElementById('<%= hdfCurrentPageNumber.ClientID %>').value = pageNumber;
document.getElementById('<%= txtCurrentPageNumber.ClientID %>').value = pageNumber;
viewLarge(pageNumber);
}
}

function goToPage(pageNumber) {
try {
pageNumber = parseInt(pageNumber);
if (pageNumber != 0 && pageNumber <= parseInt($('#' + '<%= hdfTotalPageNumber.ClientID %>').val())) {
document.getElementById('<%= hdfCurrentPageNumber.ClientID %>').value = pageNumber;
document.getElementById('<%= txtCurrentPageNumber.ClientID %>').value = pageNumber;
$("#bMessage").hide();
viewLarge(pageNumber);
}
else {
$("#bMessage").text('Invalid page number');
$("#bMessage").fadeOut('slow', '2000');
$("#bMessage").fadeOut('2000');
}
}
catch (ex) {
$("#bMessage").text('Invalid page number');
$("#bMessage").fadeOut('slow');
$("#bMessage").fadeOut('2000');
}
}

function maximize() {
$("#imageViewer").css({ 'position': 'absolute' });
$("#imageViewer").css({ 'z-index': '103', 'left': '0', 'top': '0', 'position': 'absolute' });
$(".viewer").css({ 'width': screenWidth, 'height': screenHeight });
$(".viewerToolBar").css({ 'width': screenWidth });
w = screenWidth;
h = screenHeight;
$("#imgLoading").css({ 'width': (w / 100) * 66, 'margin-left': (w / 100) * 16 });
}

function minimize() {
$("#imageViewer").css({ 'position': 'relative' });
$("#imageViewer").css({ 'z-index': '103', 'left': '0', 'top': '0', 'position': 'relative' });
$(".viewer").css({ 'width': actualWidth, 'height': actualHeight });
$(".viewerToolBar").css({ 'width': actualWidth });
w = actualWidth;
h = actualHeight;
$("#imgLoading").css({ 'width': (w / 100) * 66, 'margin-left': (w / 100) * 16 });
}

function downloadFile() {
$("#ifrmDownloader").attr("src", "../UserControl/PdfHandler.ashx?PageID=download");
}

$(document).ready(function () {
$("#imgHelp").mouseover(function (event) {
$("#divUserManualBody").css('left', $("#imgHelp").position().left);
$("#divUserManualBody").animate({ width: '+400', height: '+100', opacity: 1 }, 'slow');
$("#divUserManualBody").fadeIn(100);

});
});

$(document).ready(function () {
$("#imgHelp").mouseout(function (event) {
$("#divUserManualBody").animate({ width: '0', height: '0', opacity: 0.1 }, 'slow');
$("#divUserManualBody").fadeOut(100);
});
});

$(document).ready(function () {
$('#' + '<%= imgImageView.ClientID %>').load(function () {
$("#divLoading").hide();
$("#imgLoading").hide();
});
});

$(document).ready(function () {
$("body").keypress(function (event) {
viewerEvent(event);
});
});

$(document).ready(function () {
$("body").keydown(function (event) {
viewerEvent(event);
});
});

$(document).ready(function () {
$('#' + '<%= txtCurrentPageNumber.ClientID %>').keydown(function (event) {
var ee = event.keyCode ? event.keyCode : event.which;
if (ee == 13) //Enter
{
event.preventDefault();
var pageNumber = $('#' + '<%= txtCurrentPageNumber.ClientID %>').val();
goToPage(pageNumber);
}

});
});

$(document).ready(function () {
$('#' + '<%= divImageView.ClientID %>').bind('mousewheel', function (event) {
if (event.shiftKey) {
event.preventDefault();
if (event.wheelDelta == 120) {
zoomIn();
}
else if (event.wheelDelta == -120) {
zoomOut();
}
}
});
});

$(document).ready(function () {
$('#' + '<%= divImageView.ClientID %>').bind('mousewheel DOMMouseScroll MozMousePixelScroll', function (event) {
if (event.shiftKey) {
event.preventDefault();
if (event.detail == -3) {
zoomIn();
}
else if (event.detail == 3) {
zoomOut();
}
}
});
});

var x, y;
$(document).ready(function () {
$('#' + '<%= divImageView.ClientID %>').mousedown(function (event) {
$('#' + '<%= imgImageView.ClientID %>').css('cursor', 'move');
x = event.clientX;
y = event.clientY;
panTool = true;
});

$('#' + '<%= divImageView.ClientID %>').mouseup(function (event) {
$('#' + '<%= imgImageView.ClientID %>').css('cursor', 'default');
x = 0;
y = 0;
panTool = false;
});

$('#' + '<%= divImageView.ClientID %>').mousemove(function (event) {
if (panTool == true) {
event.preventDefault();
if (event.clientY < y) {
$('#' + '<%= divImageView.ClientID %>').scrollTop($('#' + '<%= divImageView.ClientID %>').scrollTop() - 50);
}
else {
$('#' + '<%= divImageView.ClientID %>').scrollTop($('#' + '<%= divImageView.ClientID %>').scrollTop() + 50);
}

if (event.clientX < x) {
$('#' + '<%= divImageView.ClientID %>').scrollLeft($('#' + '<%= divImageView.ClientID %>').scrollLeft() - 50);
}
else {
$('#' + '<%= divImageView.ClientID %>').scrollLeft($('#' + '<%= divImageView.ClientID %>').scrollLeft() + 50);
}
}
});
});

$(document).ready(function () {
$(".toolBarIcon").mouseenter(function () {
$("#divToolTip").css('left', $(this).position().left - 90);
$("#divToolTip").html('<br/><b>' + $(this).attr('title') + '</b>');
$("#divToolTip").fadeIn("slow");
});
});

$(document).ready(function () {
$(".toolBarIcon").mouseout(function () {
$("#divToolTip").css('left', $(this).position().left - 90);
$("#divToolTip").fadeOut("slow");
});
});
</script>
<center>
<table id="imageViewer">
<tr>
<td style="width: 600px;" valign="top" align="center" class="viewerToolBar">
<div style="text-align: center; width: 600px; background-image: url('../UserControl/Image/ToolBarBack1.gif');
background-repeat: repeat-x; vertical-align: middle;" class="viewerToolBar">
<img src="../UserControl/Image/Help.png" id="imgHelp" style="width: 20px;" />
<img src="../UserControl/Image/Save.png" style="width: 20px;" onclick="javascript:downloadFile();" class="toolBarIcon" title="Save File"/>
<div id="divUserManualBody" style="display: none; position: absolute; text-align: left;
border: 1px solid black;z-index:102;color:White; background-color: Gray;">
<ul>
<li>"+" ZoomIn And "-" ZoomOut</li>
<li>"Ctrl" + "Arrow Keys" for rotating image</li>
<li>"Arrow Keys" for navigating image</li>
<li>"Page Up And Page Down" for moving through image</li>
</ul>
</div>
<div id="divToolTip" style="background-image:url('../UserControl/Image/ToolTip.png');vertical-align:middle;position: absolute;z-index:103;display:none;background-repeat:no-repeat;position:absolute;width:180px;height:45px;"></div>
 
<img src="../UserControl/Image/First.png" style="width: 20px;" onclick="javascript:goToPage(1);" class="toolBarIcon" title="Go to first page"/>
<img src="../UserControl/Image/Previous.png" style="width: 20px;" onclick="javascript:previousPage();" class="toolBarIcon" title="Go to previous page"/>
<img src="../UserControl/Image/Next.png" style="width: 20px;" onclick="javascript:nextPage();" class="toolBarIcon" title="Go to next page"/>
<img src="../UserControl/Image/Last.png" style="width: 20px;" onclick="javascript:goToPage($('#' + '<%= hdfTotalPageNumber.ClientID %>').val());" class="toolBarIcon" title="Go to last page"/>
 
<img src="../UserControl/Image/ZoomIn.png" style="width: 20px;" onclick="javascript:zoomIn();" class="toolBarIcon" title="Zoom In"/>
<img src="../UserControl/Image/ZoomOut.png" style="width: 20px;" onclick="javascript:zoomOut();" class="toolBarIcon" title="Zoom Out"/>
 
<img src="../UserControl/Image/LeftRotate.png" style="width: 20px;" onclick="javascript:rotateImage(1);" class="toolBarIcon" title="Rotate left"/>
<img src="../UserControl/Image/RightRotate.png" style="width: 20px;" onclick="javascript:rotateImage(2);" class="toolBarIcon" title="Rotate right"/>
 
<img id="imgMaximize" src="../UserControl/Image/Maximize.png" style="width: 20px;" onclick="javascript:maximize();" class="toolBarIcon" title="Maximize viewer"/>
<img id="imgMinimize" src="../UserControl/Image/Minimize.png" style="width: 20px;" onclick="javascript:minimize();" class="toolBarIcon" title="Minimize viewer"/>
 
<img src="../UserControl/Image/Refresh.png" style="width: 20px;" onclick="javascript:goToPage($('#' + '<%= hdfCurrentPageNumber.ClientID %>').val());" class="toolBarIcon" title="Refresh page"/>
<input type="text" id="txtCurrentPageNumber" runat="server" maxlength="5" style="width: 50px;" />
<b>/ </b><b id="bTotalPageNumber" runat="server" style="color: Black;"></b>  
<b id="bMessage" style="color: Black;"></b>
</div>
</td>
</tr>
<tr>
<td valign="top" align="center" class="viewer">
<div id="divImageView" runat="server" style="width: 600px; border: 1px solid black;
vertical-align: top; height: 600px; overflow: auto;" class="viewer" >
<div id="divLoading" style="display: none; width: 600px; height: 600px; z-index: 100;
position: absolute; background-color: Green; opacity: 0.3; filter: alpha(opacity=30);" class="viewer">
</div>
<img id="imgLoading" src="../UserControl/Image/Loading.gif" style="display: none; width: 400px;
z-index: 101; position: absolute; margin-left: 100px;"/>
<img id="imgImageView" runat="server" style="width: 600px; height: 600px; cursor: hand;" class="viewer"/>
</div>
</td>
</tr>
<tr>
<td style="width: 600px" valign="top" align="center">
<iframe id="ifrmDownloader" style="display:none;" target="_blank"></iframe>
<input type="hidden<a href="">
<input type="hidden" id="hdfTotalPageNumber" runat="server" />
</td>
</tr>
<tr>
<td align="center">
<asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="false" SkinID="CancelButton"
ToolTip='<%$ Resources:Resource,Back %>' onclick="ibtnBack_Click" />
</td>
</tr>
</table>
</center>

Generic Document Viewer in Asp.Net Web Applications

4 solutions

Solution 3

Solution 2

Solution 4

Solution 1

Add your solution here

Preview 0