I'm designing a web application where a large portion of the site will be displaying user-generated documents. Now, I've already implemented LaTeX source code and pdf rendering on the website, but I am still can't render Microsoft Word files (.doc and .docx) on the site. I've looked around and found a similar question (here), but it was never answered. I'm wondering whether or not using a web-based solution like Google Docs or doing it programatically on the server with OpenOffice are viable solutions. A pure JavaScript solution would be ideal though.
I'm designing a web application where a large portion of the site will be displaying user-generated documents. Now, I've already implemented LaTeX source code and pdf rendering on the website, but I am still can't render Microsoft Word files (.doc and .docx) on the site. I've looked around and found a similar question (here), but it was never answered. I'm wondering whether or not using a web-based solution like Google Docs or doing it programatically on the server with OpenOffice are viable solutions. A pure JavaScript solution would be ideal though.
Share Improve this question edited May 23, 2017 at 11:59 CommunityBot 11 silver badge asked Aug 24, 2012 at 13:48 rahulmehta95rahulmehta95 5684 silver badges15 bronze badges2 Answers
Reset to default 5Based on Vikram's answer, you could use Google Docs Viewer in order to render the files. This way it should work on all browsers.
Instead of
<a href="doc1.doc" target="awindow">Doc 1</a>
use
<a href="http://docs.google./viewer?url=[URLToDoc1.doc]" target="awindow">Doc 1</a>
But you have to urlencode the URL. For example,
http://research.google./archive/bigtable-osdi06.pdf
bees
http%3A%2F%2Fresearch.google.%2Farchive%2Fbigtable-osdi06.pdf
You can go to https://docs.google./viewer in order to generate the links easily.
Moreover, Vikram's code is old and ugly. You should use something like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Open Doc</title>
<style type="text/css">
/*<![CDATA[*/
.clear{clear:both;}
#list{float:left;margin-right:50px;}
#wrapper{overflow:hidden;}
#awindow{width:100%;height:440px;}
/*]]>*/
</style>
</head>
<body>
<ul id="list">
<li><a href="http://docs.google./viewer?url=[URLToDoc1.doc]" target="awindow">Doc 1</a></li>
<li><a href="http://docs.google./viewer?url=[URLToDoc2.docx]" target="awindow">Doc 2</a></li>
<li><a href="http://docs.google./viewer?url=[URLToDoc3.doc]" target="awindow">Doc 3</a></li>
</ul>
<div id="wrapper">
<iframe id="awindow" name="awindow" src="title.html"></iframe>
</div>
<div class="clear"></div>
</body>
</html>
Have you tried something like this already?:
<html>
<head>
<title>Open Doc</title>
</head>
<body>
<DIV align="CENTER">
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="1" WIDTH="100%">
<TR>
<TD WIDTH="25%" ALIGN="left" VALIGN="TOP">
<a href="doc1.doc" target="awindow">Doc 1</A><br>
<a href="doc2.docx" target="awindow">Doc 2</A><br>
<a href="doc3.doc" target="awindow">Doc 3</A>
</TD>
<TD WIDTH="75%" ALIGN="CENTER" VALIGN="TOP">
<iframe name="awindow" frameborder=2 width=580 height=440 src="title.html"></iframe>
</TD></TR></TABLE></CENTER>
</DIV>
</body>
</html>
modify the href attributes to path on your server where you will place these documents