简体   繁体   English

在网页上呈现Microsoft Word文档

[英]Rendering a Microsoft Word document on a webpage

I'm designing a web application where a large portion of the site will be displaying user-generated documents. 我正在设计一个Web应用程序,其中大部分站点将显示用户生成的文档。 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. 现在,我已经在网站上实现了LaTeX源代码和pdf渲染,但我仍然无法在网站上呈现Microsoft Word文件(.doc和.docx)。 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. 我想知道是否使用像Google Docs这样的基于Web的解决方案,或者使用OpenOffice在服务器上以编程方式进行解决方案是可行的解决方案。 A pure JavaScript solution would be ideal though. 纯JavaScript解决方案是理想的。

Based on Vikram's answer, you could use Google Docs Viewer in order to render the files. 根据Vikram的回答,您可以使用Google Docs Viewer来呈现文件。 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. 但是你必须对URL进行urlencode。 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. 您可以访问https://docs.google.com/viewer以轻松生成链接。

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>

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 将href属性修改为服务器上放置这些文档的路径

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM