Menu
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.
258
About This ArticleClick the File menu and choose Save as. Choose where you want to save the file, and then give it a name. Click the ""Save as type"" menu and select Web Page. Click Save to save your new HTML code to the desired location.
To create a hyperlink, click Insert > Link. In the Display text box, type the text that people will click on. To link to a web address, type or paste the address in the Address box.
docx-preview.js plugin The Word (Docx) file will be displayed (rendered) in Browser using docx-preview. js JavaScript plugin. Note: This library only works for Word 2007 and higher formats (docx) and not the Word 97 – 2003 formats (doc). The following files JavaScript plugin will be used.
When you save a Microsoft Word document as a Web page (on the File menu, click Save as Web Page), Word automatically converts the page to HTML (Hypertext Markup Language), the language used by Web browsers to read Web pages.
Based 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.com/viewer?url=[URLToDoc1.doc]" target="awindow">Doc 1</a>
But you have to urlencode the URL. For example,
http://research.google.com/archive/bigtable-osdi06.pdf
becomes
http%3A%2F%2Fresearch.google.com%2Farchive%2Fbigtable-osdi06.pdf
You can go to https://docs.google.com/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.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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.com/viewer?url=[URLToDoc1.doc]" target="awindow">Doc 1</a></li>
<li><a href="http://docs.google.com/viewer?url=[URLToDoc2.docx]" target="awindow">Doc 2</a></li>
<li><a href="http://docs.google.com/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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
